ow
This commit is contained in:
1 parent
05ca116194
commit
1ff69f3cb3
4 files changed
+349
-253
No files matched your search
@@ -14,38 +14,43 @@ import { computed, ref, watch } from "vue";
|
||||
import { rotateLeftGlyph, rotateRightGlyph } from "@/utils/rotateGlyph";
|
||||
|
||||
export interface ImageViewerItem {
|
||||
/** 列表缩略图直链(列表已加载过,秒显);空则打开时自动拉原图 */
|
||||
thumb?: string;
|
||||
/** 原图按需加载器:页面注入,返回可播放地址(App 落盘路径 / H5 blob / 小程序本地路径) */
|
||||
loadFull?: () => Promise<string>;
|
||||
/** 展示名(顶部信息位) */
|
||||
name?: string;
|
||||
/** 列表缩略图直链(列表已加载过,秒显);空则打开时自动拉原图 */
|
||||
thumb?: string;
|
||||
/** 原图按需加载器:页面注入,返回可播放地址(App 落盘路径 / H5 blob / 小程序本地路径) */
|
||||
loadFull?: () => Promise<string>;
|
||||
/** 展示名(顶部信息位) */
|
||||
name?: string;
|
||||
}
|
||||
|
||||
interface Slot {
|
||||
/** 当前显示地址(缩略图或已加载的原图) */
|
||||
src: string;
|
||||
/** 已加载的原图地址(未拉取为 undefined) */
|
||||
full?: string;
|
||||
/** 原图拉取在途标记 */
|
||||
loading: boolean;
|
||||
/** 当前图旋转角(左旋 -90 / 右旋 +90 累积,模 360) */
|
||||
rotate: number;
|
||||
/** 当前图缩放倍率(放大 ×1.25 / 缩小 ÷1.25,0.6~4 之间) */
|
||||
scale: number;
|
||||
/** 当前显示地址(缩略图或已加载的原图) */
|
||||
src: string;
|
||||
/** 已加载的原图地址(未拉取为 undefined) */
|
||||
full?: string;
|
||||
/** 原图拉取在途标记 */
|
||||
loading: boolean;
|
||||
/** 当前图旋转角(左旋 -90 / 右旋 +90 累积,模 360) */
|
||||
rotate: number;
|
||||
/** 当前图缩放倍率(放大 ×1.25 / 缩小 ÷1.25,0.6~4 之间) */
|
||||
scale: number;
|
||||
/** 平移量(px,屏幕轴;只有放大后单指拖动才会变,缩回 1 倍自动归零) */
|
||||
x: number;
|
||||
y: number;
|
||||
/** 拖动会话中:临时关掉 transform 过渡,图片跟手 */
|
||||
dragging: boolean;
|
||||
}
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
visible: boolean;
|
||||
items?: ImageViewerItem[];
|
||||
}>(),
|
||||
{ items: () => [] },
|
||||
defineProps<{
|
||||
visible: boolean;
|
||||
items?: ImageViewerItem[];
|
||||
}>(),
|
||||
{ items: () => [] },
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
/** 点关闭按钮 */
|
||||
(e: "close"): void;
|
||||
/** 点关闭按钮 */
|
||||
(e: "close"): void;
|
||||
}>();
|
||||
|
||||
// 旋转字形恒白,模块级生成一次(custom-icon.md:颜色固定 → 模块级 const)
|
||||
@@ -54,109 +59,169 @@ const rotateRightIcon = rotateRightGlyph("#ffffff");
|
||||
|
||||
const { t } = useLocale();
|
||||
|
||||
// 图区尺寸缓存:拖动边界按「放大溢出量的一半」算,不必每帧调同步 API
|
||||
const { windowWidth: viewWidth, windowHeight: viewHeight } = uni.getSystemInfoSync();
|
||||
|
||||
const slots = ref<Slot[]>([]);
|
||||
const index = ref(0);
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(v) => {
|
||||
if (v) {
|
||||
index.value = 0;
|
||||
slots.value = (props.items ?? []).map(item => ({
|
||||
src: item.thumb || "",
|
||||
full: undefined,
|
||||
loading: false,
|
||||
rotate: 0,
|
||||
scale: 1,
|
||||
}));
|
||||
// 没有缩略图的老文件:打开即自动拉原图兜底,不留白等用户点按钮
|
||||
slots.value.forEach((_, i) => {
|
||||
if (!slots.value[i].src) {
|
||||
loadOriginal(i);
|
||||
() => props.visible,
|
||||
(v) => {
|
||||
if (v) {
|
||||
index.value = 0;
|
||||
slots.value = (props.items ?? []).map(item => ({
|
||||
src: item.thumb || "",
|
||||
full: undefined,
|
||||
loading: false,
|
||||
rotate: 0,
|
||||
scale: 1,
|
||||
x: 0,
|
||||
y: 0,
|
||||
dragging: false,
|
||||
}));
|
||||
// 没有缩略图的老文件:打开即自动拉原图兜底,不留白等用户点按钮
|
||||
slots.value.forEach((_, i) => {
|
||||
if (!slots.value[i].src) {
|
||||
loadOriginal(i);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
else {
|
||||
revokeBlobs();
|
||||
// 关窗即释放高清地址:App 端是 data: URI(一张图几 MB),多图连览不能积压
|
||||
slots.value = [];
|
||||
}
|
||||
},
|
||||
else {
|
||||
revokeBlobs();
|
||||
// 关窗即释放高清地址:App 端是 data: URI(一张图几 MB),多图连览不能积压
|
||||
slots.value = [];
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
/** 关闭时回收 H5 blob: 地址;App/小程序是本地文件路径,不处理(App 落盘文件正好当下次缓存) */
|
||||
function revokeBlobs(): void {
|
||||
// #ifdef H5
|
||||
slots.value.forEach((slot) => {
|
||||
if (slot.full && slot.full.startsWith("blob:")) {
|
||||
URL.revokeObjectURL(slot.full);
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
slots.value.forEach((slot) => {
|
||||
if (slot.full && slot.full.startsWith("blob:")) {
|
||||
URL.revokeObjectURL(slot.full);
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
}
|
||||
|
||||
function onSwipeChange(e: any): void {
|
||||
index.value = e?.detail?.current ?? 0;
|
||||
index.value = e?.detail?.current ?? 0;
|
||||
}
|
||||
|
||||
/** 左旋/右旋:每图独立累积角,模 360 防无限增长 */
|
||||
function rotateCurrent(delta: number): void {
|
||||
const slot = slots.value[index.value];
|
||||
if (!slot) {
|
||||
return;
|
||||
}
|
||||
slot.rotate = (slot.rotate + delta) % 360;
|
||||
const slot = slots.value[index.value];
|
||||
if (!slot) {
|
||||
return;
|
||||
}
|
||||
slot.rotate = (slot.rotate + delta) % 360;
|
||||
}
|
||||
|
||||
/** 放大/缩小:倍率夹在 0.6~4,超出范围按钮照点不生效(变换仍平滑) */
|
||||
/**
|
||||
* 拖动边界:放大 n 倍后中心最多偏出 (n-1)/2 个屏宽/屏高,图片不会整体拖出视野;
|
||||
* 缩回 1 倍时 max 为 0,偏移自动归零
|
||||
*/
|
||||
function clampOffset(slot: Slot): void {
|
||||
const maxX = Math.max(0, (slot.scale - 1) * viewWidth / 2);
|
||||
const maxY = Math.max(0, (slot.scale - 1) * viewHeight / 2);
|
||||
slot.x = Math.min(maxX, Math.max(-maxX, slot.x));
|
||||
slot.y = Math.min(maxY, Math.max(-maxY, slot.y));
|
||||
}
|
||||
|
||||
// 单指拖动会话(同一时刻只有一根手指在拖当前图,不必存进每个 Slot)
|
||||
let dragStartX = 0;
|
||||
let dragStartY = 0;
|
||||
let dragOriginX = 0;
|
||||
let dragOriginY = 0;
|
||||
|
||||
/** 放大后才启用单指平移:小图状态单指手势留给 swiper 翻页 */
|
||||
function onImageTouchStart(e: any): void {
|
||||
const slot = slots.value[index.value];
|
||||
const touch = e.touches?.[0];
|
||||
if (!slot || !touch || slot.scale <= 1) {
|
||||
return;
|
||||
}
|
||||
slot.dragging = true;
|
||||
dragStartX = touch.clientX;
|
||||
dragStartY = touch.clientY;
|
||||
dragOriginX = slot.x;
|
||||
dragOriginY = slot.y;
|
||||
}
|
||||
|
||||
/** 拖动平移:transform 里 translate 在最外层,位移沿屏幕轴、与旋转角无关,始终跟手 */
|
||||
function onImageTouchMove(e: any): void {
|
||||
const slot = slots.value[index.value];
|
||||
const touch = e.touches?.[0];
|
||||
if (!slot || !slot.dragging || !touch) {
|
||||
return;
|
||||
}
|
||||
slot.x = dragOriginX + touch.clientX - dragStartX;
|
||||
slot.y = dragOriginY + touch.clientY - dragStartY;
|
||||
clampOffset(slot);
|
||||
}
|
||||
|
||||
function onImageTouchEnd(): void {
|
||||
const slot = slots.value[index.value];
|
||||
if (slot) {
|
||||
slot.dragging = false;
|
||||
}
|
||||
}
|
||||
|
||||
/** 放大(>1 倍)时禁用 swiper 翻页,把单指手势让给图片平移 */
|
||||
const panEnabled = computed(() => (slots.value[index.value]?.scale ?? 1) > 1);
|
||||
|
||||
/** 放大/缩小:倍率夹在 0.6~4,超出范围按钮照点不生效(变换仍平滑);缩放后收一下平移量 */
|
||||
function zoomCurrent(factor: number): void {
|
||||
const slot = slots.value[index.value];
|
||||
if (!slot) {
|
||||
return;
|
||||
}
|
||||
slot.scale = Math.min(4, Math.max(0.6, slot.scale * factor));
|
||||
const slot = slots.value[index.value];
|
||||
if (!slot) {
|
||||
return;
|
||||
}
|
||||
slot.scale = Math.min(4, Math.max(0.6, slot.scale * factor));
|
||||
clampOffset(slot);
|
||||
}
|
||||
|
||||
/** 高清钮文案:拉取中 / 已高清 / 高清 */
|
||||
const buttonText = computed(() => {
|
||||
const slot = slots.value[index.value];
|
||||
if (!slot) {
|
||||
return t("FilePage.previewOriginal");
|
||||
}
|
||||
if (slot.loading) {
|
||||
return t("FilePage.previewOriginalLoading");
|
||||
}
|
||||
return slot.full ? t("FilePage.previewOriginalLoaded") : t("FilePage.previewOriginal");
|
||||
const slot = slots.value[index.value];
|
||||
if (!slot) {
|
||||
return t("FilePage.previewOriginal");
|
||||
}
|
||||
if (slot.loading) {
|
||||
return t("FilePage.previewOriginalLoading");
|
||||
}
|
||||
return slot.full ? t("FilePage.previewOriginalLoaded") : t("FilePage.previewOriginal");
|
||||
});
|
||||
|
||||
/** 拉取中/已加载时禁用高清钮,避免重复触发 */
|
||||
const buttonDisabled = computed(() => {
|
||||
const slot = slots.value[index.value];
|
||||
return !slot || slot.loading || !!slot.full;
|
||||
const slot = slots.value[index.value];
|
||||
return !slot || slot.loading || !!slot.full;
|
||||
});
|
||||
|
||||
/** 按需拉原图:成功后立即原地替换当前图(同一 image 换 src 即重载,高清及时切换) */
|
||||
async function loadOriginal(i = index.value): Promise<void> {
|
||||
const item = props.items?.[i];
|
||||
const slot = slots.value[i];
|
||||
if (!item || !slot || slot.loading || slot.full || !item.loadFull) {
|
||||
return;
|
||||
}
|
||||
slot.loading = true;
|
||||
try {
|
||||
const url = await item.loadFull();
|
||||
slot.full = url;
|
||||
slot.src = url;
|
||||
}
|
||||
catch (error: any) {
|
||||
uni.showToast({
|
||||
title: error?.message || t("FilePage.previewOriginalFail"),
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
finally {
|
||||
slot.loading = false;
|
||||
}
|
||||
const item = props.items?.[i];
|
||||
const slot = slots.value[i];
|
||||
if (!item || !slot || slot.loading || slot.full || !item.loadFull) {
|
||||
return;
|
||||
}
|
||||
slot.loading = true;
|
||||
try {
|
||||
const url = await item.loadFull();
|
||||
slot.full = url;
|
||||
slot.src = url;
|
||||
}
|
||||
catch (error: any) {
|
||||
uni.showToast({
|
||||
title: error?.message || t("FilePage.previewOriginalFail"),
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
finally {
|
||||
slot.loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -164,180 +229,179 @@ async function loadOriginal(i = index.value): Promise<void> {
|
||||
* 不让用户对着黑屏;同时清掉 full 让高清钮回到可重试状态
|
||||
*/
|
||||
function onImageError(i: number): void {
|
||||
const slot = slots.value[i];
|
||||
const item = props.items?.[i];
|
||||
if (!slot || !item || !slot.full || slot.src !== slot.full) {
|
||||
return;
|
||||
}
|
||||
slot.src = item.thumb || "";
|
||||
slot.full = undefined;
|
||||
uni.showToast({
|
||||
title: t("FilePage.previewOriginalFail"),
|
||||
icon: "none",
|
||||
});
|
||||
const slot = slots.value[i];
|
||||
const item = props.items?.[i];
|
||||
if (!slot || !item || !slot.full || slot.src !== slot.full) {
|
||||
return;
|
||||
}
|
||||
slot.src = item.thumb || "";
|
||||
slot.full = undefined;
|
||||
uni.showToast({
|
||||
title: t("FilePage.previewOriginalFail"),
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view v-if="visible" class="iv" @touchmove.stop.prevent>
|
||||
<!-- 顶部:计数 + 工具组(左旋/右旋/放大/缩小/高清/关闭,状态栏避让同 photo-slide-player 口径) -->
|
||||
<view class="iv-top">
|
||||
<text class="iv-count">
|
||||
{{ index + 1 }} / {{ slots.length }}
|
||||
</text>
|
||||
<view class="iv-tools">
|
||||
<view class="iv-tool" @click="rotateCurrent(-90)">
|
||||
<image class="iv-tool-img" :src="rotateLeftIcon" mode="aspectFit" />
|
||||
<view v-if="visible" class="iv" @touchstart="onImageTouchStart" @touchmove.stop.prevent="onImageTouchMove"
|
||||
@touchend="onImageTouchEnd" @touchcancel="onImageTouchEnd">
|
||||
<!-- 顶部:计数 + 工具组(左旋/右旋/放大/缩小/高清/关闭,状态栏避让同 photo-slide-player 口径) -->
|
||||
<view class="iv-top">
|
||||
<text class="iv-count">
|
||||
{{ index + 1 }} / {{ slots.length }}
|
||||
</text>
|
||||
<view class="iv-tools">
|
||||
<view class="iv-tool" @click="rotateCurrent(-90)">
|
||||
<image class="iv-tool-img" :src="rotateLeftIcon" mode="aspectFit" />
|
||||
</view>
|
||||
<view class="iv-tool" @click="rotateCurrent(90)">
|
||||
<image class="iv-tool-img" :src="rotateRightIcon" mode="aspectFit" />
|
||||
</view>
|
||||
<view class="iv-tool" @click="zoomCurrent(1.25)">
|
||||
<u-icon name="plus" size="40" color="#ffffff" />
|
||||
</view>
|
||||
<view class="iv-tool" @click="zoomCurrent(0.8)">
|
||||
<u-icon name="minus" size="40" color="#ffffff" />
|
||||
</view>
|
||||
<!-- 高清用文字(需求约定),拉取中/已加载禁用 -->
|
||||
<view class="iv-tool iv-tool--text" :class="{ 'is-disabled': buttonDisabled }" @click="loadOriginal()">
|
||||
<text class="iv-tool-text">
|
||||
{{ buttonText }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="iv-tool" @click="emit('close')">
|
||||
<u-icon name="close" size="40" color="#ffffff" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="iv-tool" @click="rotateCurrent(90)">
|
||||
<image class="iv-tool-img" :src="rotateRightIcon" mode="aspectFit" />
|
||||
</view>
|
||||
<view class="iv-tool" @click="zoomCurrent(1.25)">
|
||||
<u-icon name="plus" size="40" color="#ffffff" />
|
||||
</view>
|
||||
<view class="iv-tool" @click="zoomCurrent(0.8)">
|
||||
<u-icon name="minus" size="40" color="#ffffff" />
|
||||
</view>
|
||||
<!-- 高清用文字(需求约定),拉取中/已加载禁用 -->
|
||||
<view
|
||||
class="iv-tool iv-tool--text"
|
||||
:class="{ 'is-disabled': buttonDisabled }"
|
||||
@click="loadOriginal()"
|
||||
>
|
||||
<text class="iv-tool-text">
|
||||
{{ buttonText }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="iv-tool" @click="emit('close')">
|
||||
<u-icon name="close" size="40" color="#ffffff" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 图区:左右滑动连览,每张按「缩略图 → 高清」渐进升级,旋转/缩放按图独立 -->
|
||||
<swiper class="iv-swiper" :current="index" @change="onSwipeChange">
|
||||
<swiper-item v-for="(slot, i) in slots" :key="i" class="iv-pane">
|
||||
<image
|
||||
v-if="slot.src"
|
||||
class="iv-img"
|
||||
:src="slot.src"
|
||||
mode="aspectFit"
|
||||
:style="{ transform: `rotate(${slot.rotate}deg) scale(${slot.scale})` }"
|
||||
@error="onImageError(i)"
|
||||
/>
|
||||
<!-- 缩略图缺失时的拉取占位(打开即自动拉原图,这里只在途提示) -->
|
||||
<view v-else class="iv-wait">
|
||||
<text class="iv-wait-text">
|
||||
{{ t("FilePage.previewOriginalLoading") }}
|
||||
</text>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
<!-- 图区:左右滑动连览,每张按「缩略图 → 高清」渐进升级,旋转/缩放/平移按图独立;
|
||||
放大后禁用 swiper 翻页(单指手势让给拖动) -->
|
||||
<swiper class="iv-swiper" :current="index" :disable-touch="panEnabled" @change="onSwipeChange">
|
||||
<swiper-item v-for="(slot, i) in slots" :key="i" class="iv-pane">
|
||||
<image v-if="slot.src" class="iv-img" :class="{ 'iv-img--dragging': slot.dragging }" :src="slot.src"
|
||||
mode="aspectFit"
|
||||
:style="{ transform: `translate(${slot.x}px, ${slot.y}px) rotate(${slot.rotate}deg) scale(${slot.scale})` }"
|
||||
@error="onImageError(i)" />
|
||||
<!-- 缩略图缺失时的拉取占位(打开即自动拉原图,这里只在途提示) -->
|
||||
<view v-else class="iv-wait">
|
||||
<text class="iv-wait-text">
|
||||
{{ t("FilePage.previewOriginalLoading") }}
|
||||
</text>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.iv {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: rgba(0, 0, 0, 0.96);
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: rgba(0, 0, 0, 0.96);
|
||||
}
|
||||
|
||||
/* ===== 顶部栏 ===== */
|
||||
.iv-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
/* App 端状态栏透明且不占位,用 uni 注入的 --status-bar-height 避让;H5 用 safe-area */
|
||||
/* #ifdef APP-PLUS */
|
||||
padding-top: calc(24rpx + var(--status-bar-height, 0px));
|
||||
/* #endif */
|
||||
/* #ifndef APP-PLUS */
|
||||
padding-top: calc(24rpx + env(safe-area-inset-top));
|
||||
/* #endif */
|
||||
padding-right: 24rpx;
|
||||
padding-bottom: 16rpx;
|
||||
padding-left: 32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
/* App 端状态栏透明且不占位,用 uni 注入的 --status-bar-height 避让;H5 用 safe-area */
|
||||
/* #ifdef APP-PLUS */
|
||||
padding-top: calc(24rpx + var(--status-bar-height, 0px));
|
||||
/* #endif */
|
||||
/* #ifndef APP-PLUS */
|
||||
padding-top: calc(24rpx + env(safe-area-inset-top));
|
||||
/* #endif */
|
||||
padding-right: 24rpx;
|
||||
padding-bottom: 16rpx;
|
||||
padding-left: 32rpx;
|
||||
}
|
||||
|
||||
.iv-count {
|
||||
font-size: 28rpx;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-size: 28rpx;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.iv-tools {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
/* 工具钮:圆形半透明底;高清/关闭同款容器保证对齐 */
|
||||
.iv-tool {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.14);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.14);
|
||||
}
|
||||
|
||||
.iv-tool-img {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
/* 高清文字钮:胶囊底,宽随文案 */
|
||||
.iv-tool--text {
|
||||
width: auto;
|
||||
padding: 0 28rpx;
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.45);
|
||||
border-radius: 999rpx;
|
||||
width: auto;
|
||||
padding: 0 28rpx;
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.45);
|
||||
border-radius: 999rpx;
|
||||
}
|
||||
|
||||
.iv-tool-text {
|
||||
font-size: 26rpx;
|
||||
color: #ffffff;
|
||||
white-space: nowrap;
|
||||
font-size: 26rpx;
|
||||
color: #ffffff;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.iv-tool.is-disabled {
|
||||
opacity: 0.55;
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
/* ===== 图区 ===== */
|
||||
.iv-swiper {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.iv-pane {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.iv-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* 旋转/缩放平滑过渡(0.25s 足够跟手又不会显得迟滞) */
|
||||
transition: transform 0.25s ease;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* 旋转/缩放平滑过渡(0.25s 足够跟手又不会显得迟滞) */
|
||||
transition: transform 0.25s ease;
|
||||
}
|
||||
|
||||
/* 拖动中关掉过渡:否则图片会追着手指爬,跟手感全无 */
|
||||
.iv-img--dragging {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.iv-wait {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.iv-wait-text {
|
||||
font-size: 26rpx;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 26rpx;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
</style>
|
||||
@@ -74,6 +74,17 @@ function extOf(fileName: string): string {
|
||||
return dot > 0 ? fileName.slice(dot) : ".ext";
|
||||
}
|
||||
|
||||
/**
|
||||
* 分片协议名唯一前缀(uid-序号-总数.ext 的 uid 段)。
|
||||
* pump() 是同步循环,同批并发任务几乎必在同一毫秒点着,只靠 Date.now() 会重名:
|
||||
* App 端重名会让 copyTo 目标冲突或互相覆盖,H5 端重名会让分片文件互相覆盖;
|
||||
* 重试任务也会重新准备,同样要换新名,故再拼模块级自增序号。
|
||||
*/
|
||||
function uniqueUploadTag(): string {
|
||||
seq += 1;
|
||||
return `uni-${Date.now()}-${seq}`;
|
||||
}
|
||||
|
||||
/** 分片大小:内网 3MB / 公网 1MB(旧系统 FileUpload 同口径;开发构建视为内网) */
|
||||
function resolveChunkSize(): number {
|
||||
const publicNet = /localhost|127\.|192\.168\.|10\./.test(baseUrl);
|
||||
@@ -88,7 +99,7 @@ function prepareAppFilePath(item: UploadItem): Promise<string> {
|
||||
// 真机验证前不引入分片循环(读不了本地字节切片)
|
||||
return copyIntoAppUploadDir(
|
||||
item.filePath,
|
||||
`uni-${Date.now()}-1-1${extOf(item.name)}`,
|
||||
`${uniqueUploadTag()}-1-1${extOf(item.name)}`,
|
||||
);
|
||||
// #endif
|
||||
// #ifndef APP-PLUS
|
||||
@@ -202,7 +213,7 @@ export const useUploadQueueStore = defineStore(
|
||||
let aborted = false;
|
||||
const chunkSize = resolveChunkSize();
|
||||
const total = Math.max(Math.ceil(blob.size / chunkSize), 1);
|
||||
const uid = `uni-${Date.now()}`;
|
||||
const uid = uniqueUploadTag();
|
||||
const startedAt = Date.now();
|
||||
let doneBytes = 0;
|
||||
|
||||
@@ -272,7 +283,7 @@ export const useUploadQueueStore = defineStore(
|
||||
};
|
||||
}
|
||||
|
||||
/** uni 通道(App):先复制成分片名再发(后端按 filename 解析分片);复制失败回退原路径,至少能拿到明确的后端报错 */
|
||||
/** uni 通道(App):先复制成分片名再发(后端按 filename 解析分片);复制失败直接判失败,不回退原路径 */
|
||||
function uniUpload(item: UploadItem): UploadHandle {
|
||||
let task: UniApp.UploadTask | null = null;
|
||||
let aborted = false;
|
||||
@@ -310,7 +321,14 @@ export const useUploadQueueStore = defineStore(
|
||||
|
||||
prepareAppFilePath(item)
|
||||
.then(start)
|
||||
.catch(() => start(item.filePath));
|
||||
.catch(() => {
|
||||
// 绝不能回退原路径重传:原文件名没有 uid-序号-总数 协议,后端
|
||||
// PackUploadDmsFile 拆不出分片序号会静默 return null(HTTP 200 空体),
|
||||
// 任务反而被当成成功、库里却是 0 条——宁可显式失败让用户重试
|
||||
item.status = "failed";
|
||||
item.error = "文件准备失败";
|
||||
finish(item);
|
||||
});
|
||||
|
||||
return {
|
||||
abort: () => {
|
||||
|
||||
@@ -19,8 +19,8 @@ declare const plus: any;
|
||||
/** 单次过桥字节数:512KB 转 base64 约 683KB 字符串,兼顾内存峰值与调用次数 */
|
||||
const BYTES_PER_TRIP = 512 * 1024;
|
||||
|
||||
const BASE64_CHARS
|
||||
= "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
|
||||
const BASE64_CHARS =
|
||||
"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
|
||||
|
||||
/**
|
||||
* 纯 JS base64(浏览器 btoa 在 App 逻辑层不保证存在,不依赖它):
|
||||
@@ -52,7 +52,9 @@ export function base64OfBytes(bytes: ArrayBuffer): string {
|
||||
const parts: string[] = [];
|
||||
for (let offset = 0; offset < data.length; offset += chunkSize) {
|
||||
parts.push(
|
||||
base64OfChunk(data.subarray(offset, Math.min(offset + chunkSize, data.length))),
|
||||
base64OfChunk(
|
||||
data.subarray(offset, Math.min(offset + chunkSize, data.length)),
|
||||
),
|
||||
);
|
||||
}
|
||||
return parts.join("");
|
||||
@@ -71,27 +73,27 @@ const PUBLIC_DOWNLOAD_FOLDER = "有家啦";
|
||||
export function mimeOf(fileName: string): string {
|
||||
const ext = fileName.slice(fileName.lastIndexOf(".") + 1).toLowerCase();
|
||||
const map: Record<string, string> = {
|
||||
"jpg": "image/jpeg",
|
||||
"jpeg": "image/jpeg",
|
||||
"png": "image/png",
|
||||
"gif": "image/gif",
|
||||
"webp": "image/webp",
|
||||
"bmp": "image/bmp",
|
||||
"mp3": "audio/mpeg",
|
||||
"m4a": "audio/mp4",
|
||||
"wav": "audio/wav",
|
||||
"aac": "audio/aac",
|
||||
"mp4": "video/mp4",
|
||||
"mov": "video/quicktime",
|
||||
jpg: "image/jpeg",
|
||||
jpeg: "image/jpeg",
|
||||
png: "image/png",
|
||||
gif: "image/gif",
|
||||
webp: "image/webp",
|
||||
bmp: "image/bmp",
|
||||
mp3: "audio/mpeg",
|
||||
m4a: "audio/mp4",
|
||||
wav: "audio/wav",
|
||||
aac: "audio/aac",
|
||||
mp4: "video/mp4",
|
||||
mov: "video/quicktime",
|
||||
"3gp": "video/3gpp",
|
||||
"pdf": "application/pdf",
|
||||
"txt": "text/plain",
|
||||
"json": "application/json",
|
||||
"xls": "application/vnd.ms-excel",
|
||||
"xlsx": "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
|
||||
"doc": "application/msword",
|
||||
"docx": "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
|
||||
"zip": "application/zip",
|
||||
pdf: "application/pdf",
|
||||
txt: "text/plain",
|
||||
json: "application/json",
|
||||
xls: "application/vnd.ms-excel",
|
||||
xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
|
||||
doc: "application/msword",
|
||||
docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
|
||||
zip: "application/zip",
|
||||
};
|
||||
return map[ext] || "application/octet-stream";
|
||||
}
|
||||
|
||||
@@ -13,7 +13,11 @@
|
||||
import { requestBuffer, saveArrayBuffer } from "@/common/http.interceptor";
|
||||
import { FileTypePolicy } from "@/policy/custom/fileTypePolicy";
|
||||
import dmsFileService from "@/service/master/dmsFileService";
|
||||
import { base64OfBytes, mimeOf, writeAppFileFromBytes } from "@/utils/appFileWrite";
|
||||
import {
|
||||
base64OfBytes,
|
||||
mimeOf,
|
||||
writeAppFileFromBytes,
|
||||
} from "@/utils/appFileWrite";
|
||||
|
||||
/** 取回结果:整文件字节 + 展示文件名(下载落盘与生成播放地址共用) */
|
||||
export interface FileBytes {
|
||||
@@ -27,21 +31,27 @@ export interface FileBytes {
|
||||
*/
|
||||
function imageMimeOf(bytes: ArrayBuffer, name: string): string {
|
||||
const head = new Uint8Array(bytes, 0, Math.min(12, bytes.byteLength));
|
||||
if (head[0] === 0xFF && head[1] === 0xD8) {
|
||||
if (head[0] === 0xff && head[1] === 0xd8) {
|
||||
return "image/jpeg";
|
||||
}
|
||||
if (head[0] === 0x89 && head[1] === 0x50 && head[2] === 0x4E) {
|
||||
if (head[0] === 0x89 && head[1] === 0x50 && head[2] === 0x4e) {
|
||||
return "image/png";
|
||||
}
|
||||
if (head[0] === 0x47 && head[1] === 0x49 && head[2] === 0x46) {
|
||||
return "image/gif";
|
||||
}
|
||||
if (head[0] === 0x42 && head[1] === 0x4D) {
|
||||
if (head[0] === 0x42 && head[1] === 0x4d) {
|
||||
return "image/bmp";
|
||||
}
|
||||
if (
|
||||
head[0] === 0x52 && head[1] === 0x49 && head[2] === 0x46 && head[3] === 0x46
|
||||
&& head[8] === 0x57 && head[9] === 0x45 && head[10] === 0x42 && head[11] === 0x50
|
||||
head[0] === 0x52 &&
|
||||
head[1] === 0x49 &&
|
||||
head[2] === 0x46 &&
|
||||
head[3] === 0x46 &&
|
||||
head[8] === 0x57 &&
|
||||
head[9] === 0x45 &&
|
||||
head[10] === 0x42 &&
|
||||
head[11] === 0x50
|
||||
) {
|
||||
return "image/webp";
|
||||
}
|
||||
@@ -54,8 +64,8 @@ async function fetchCombineBytes(
|
||||
fileSizeKb: number,
|
||||
): Promise<ArrayBuffer> {
|
||||
const segments = orderKey.split("-");
|
||||
const total
|
||||
= Number.parseInt(segments[segments.length - 1].split(".")[0], 10) || 1;
|
||||
const total =
|
||||
Number.parseInt(segments[segments.length - 1].split(".")[0], 10) || 1;
|
||||
const merged = new Uint8Array((fileSizeKb + 1) * 1024);
|
||||
let offset = 0;
|
||||
// 串行逐片:并发打多片旧系统没做、后端也没限流承诺,跟旧行为保持一致
|
||||
@@ -118,7 +128,9 @@ export async function saveFileBytes(file: FileBytes): Promise<void> {
|
||||
export function toPlayableUrl(file: FileBytes): string {
|
||||
// #ifdef H5
|
||||
// Blob 必须带 MIME:Chrome 会嗅探无 type 的 blob,Safari/部分微信内核不嗅探,直接黑图
|
||||
return URL.createObjectURL(new Blob([file.bytes], { type: mimeOf(file.name) }));
|
||||
return URL.createObjectURL(
|
||||
new Blob([file.bytes], { type: mimeOf(file.name) }),
|
||||
);
|
||||
// #endif
|
||||
// #ifndef H5
|
||||
// #ifdef APP-PLUS
|
||||
|
||||
Reference in new issue
Block a user