888 lines
26 KiB
Vue
888 lines
26 KiB
Vue
|
<template>
|
|||
|
|
<view
|
|||
|
|
:style="tools._style([customStyle])"
|
|||
|
|
:class="classPrefix + ' ' + tClass"
|
|||
|
|
>
|
|||
|
|
<t-grid
|
|||
|
|
:gutter="gutter"
|
|||
|
|
:border="false"
|
|||
|
|
align="center"
|
|||
|
|
:column="column"
|
|||
|
|
:custom-style="draggable ? 'overflow: visible' : ''"
|
|||
|
|
>
|
|||
|
|
<block v-if="!dragLayout">
|
|||
|
|
<t-grid-item
|
|||
|
|
v-for="(file, index) in customFiles"
|
|||
|
|
:key="index"
|
|||
|
|
:t-class="classPrefix + '__grid ' + classPrefix + '__grid-file'"
|
|||
|
|
:t-class-content="classPrefix + '__grid-content'"
|
|||
|
|
aria-role="presentation"
|
|||
|
|
>
|
|||
|
|
<view
|
|||
|
|
:class="classPrefix + '__wrapper ' + (disabled ? classPrefix + '__wrapper--disabled' : '')"
|
|||
|
|
:style="gridItemStyle"
|
|||
|
|
:aria-role="ariaRole || getWrapperAriaRole(file)"
|
|||
|
|
:aria-label="ariaLabel || getWrapperAriaLabel(file)"
|
|||
|
|
>
|
|||
|
|
<t-image
|
|||
|
|
v-if="file.type !== 'video'"
|
|||
|
|
:data-file="file"
|
|||
|
|
:data-index="index"
|
|||
|
|
:t-class="classPrefix + '__thumbnail'"
|
|||
|
|
:custom-style="(imageProps && imageProps.style) || ''"
|
|||
|
|
:src="file.thumb || file.url"
|
|||
|
|
:mode="(imageProps && imageProps.mode) || 'aspectFill'"
|
|||
|
|
:error="(imageProps && imageProps.error) || 'default'"
|
|||
|
|
:lazy="(imageProps && imageProps.lazy) || false"
|
|||
|
|
:loading="(imageProps && imageProps.loading) || 'default'"
|
|||
|
|
:shape="(imageProps && imageProps.shape) || 'round'"
|
|||
|
|
:webp="(imageProps && imageProps.webp) || false"
|
|||
|
|
:show-menu-by-longpress="(imageProps && imageProps.showMenuByLongpress) || false"
|
|||
|
|
@click="onPreview($event, { file, index })"
|
|||
|
|
/>
|
|||
|
|
<video
|
|||
|
|
v-if="file.type === 'video'"
|
|||
|
|
:class="classPrefix + '__thumbnail'"
|
|||
|
|
:src="file.url"
|
|||
|
|
:poster="file.thumb"
|
|||
|
|
controls
|
|||
|
|
:autoplay="false"
|
|||
|
|
objectFit="contain"
|
|||
|
|
:data-file="file"
|
|||
|
|
@click.stop="onFileClick"
|
|||
|
|
/>
|
|||
|
|
<view
|
|||
|
|
v-if="file.status && file.status != 'done'"
|
|||
|
|
:class="classPrefix + '__progress-mask'"
|
|||
|
|
:data-index="index"
|
|||
|
|
:data-file="file"
|
|||
|
|
@click.stop="onFileClick"
|
|||
|
|
>
|
|||
|
|
<block v-if="file.status == 'loading'">
|
|||
|
|
<t-icon
|
|||
|
|
:t-class="classPrefix + '__progress-loading'"
|
|||
|
|
name="loading"
|
|||
|
|
size="48rpx"
|
|||
|
|
aria-hidden
|
|||
|
|
/>
|
|||
|
|
<view :class="classPrefix + '__progress-text'">
|
|||
|
|
{{ file.percent ? file.percent + '%' : '上传中...' }}
|
|||
|
|
</view>
|
|||
|
|
</block>
|
|||
|
|
<t-icon
|
|||
|
|
v-else
|
|||
|
|
:name="file.status == 'reload' ? 'refresh' : 'close-circle'"
|
|||
|
|
size="48rpx"
|
|||
|
|
aria-hidden
|
|||
|
|
/>
|
|||
|
|
<view
|
|||
|
|
v-if="file.status == 'reload' || file.status == 'failed'"
|
|||
|
|
:class="classPrefix + '__progress-text'"
|
|||
|
|
>
|
|||
|
|
{{ file.status == 'reload' ? '重新上传' : '上传失败' }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
v-if="tools.isBoolean(file.removeBtn) ? file.removeBtn : removeBtn"
|
|||
|
|
:class="classPrefix + '__close-btn hotspot-expanded'"
|
|||
|
|
:data-index="index"
|
|||
|
|
aria-role="button"
|
|||
|
|
aria-label="删除"
|
|||
|
|
@click.stop="onDelete"
|
|||
|
|
>
|
|||
|
|
<t-icon
|
|||
|
|
name="close"
|
|||
|
|
size="32rpx"
|
|||
|
|
color="#fff"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</t-grid-item>
|
|||
|
|
<t-grid-item
|
|||
|
|
v-if="addBtn && customLimit > 0"
|
|||
|
|
:t-class="classPrefix + '__grid'"
|
|||
|
|
:t-class-content="classPrefix + '__grid-content'"
|
|||
|
|
aria-label="上传"
|
|||
|
|
@click="onAddTap"
|
|||
|
|
>
|
|||
|
|
<view
|
|||
|
|
:class="classPrefix + '__wrapper'"
|
|||
|
|
:style="gridItemStyle"
|
|||
|
|
>
|
|||
|
|
<slot name="add-content" />
|
|||
|
|
<block v-if="addContent">
|
|||
|
|
{{ addContent }}
|
|||
|
|
</block>
|
|||
|
|
<view
|
|||
|
|
v-else
|
|||
|
|
:class="classPrefix + '__add-icon ' + (disabled ? classPrefix + '__add-icon--disabled' : '')"
|
|||
|
|
>
|
|||
|
|
<t-icon name="add" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</t-grid-item>
|
|||
|
|
</block>
|
|||
|
|
<block v-else>
|
|||
|
|
<view
|
|||
|
|
:class="classPrefix + '__drag'"
|
|||
|
|
:list="dragList"
|
|||
|
|
:style="dragWrapStyle + ';'"
|
|||
|
|
:drag-base-data="dragBaseData"
|
|||
|
|
>
|
|||
|
|
<view
|
|||
|
|
v-for="(file, index) in customFiles"
|
|||
|
|
:key="index"
|
|||
|
|
:ref="classPrefix + '__drag-item'"
|
|||
|
|
:class="getDragItemClass(index)"
|
|||
|
|
:style="getDragItemStyle(index)"
|
|||
|
|
:data-index="index"
|
|||
|
|
@longpress="parseEventDynamicCode($event, 'longPress', index)"
|
|||
|
|
@touchmove.stop.prevent="parseEventDynamicCode($event, dragging ? 'touchMove' : '', index)"
|
|||
|
|
@touchend.stop.prevent="parseEventDynamicCode($event, dragging ? 'touchEnd' : '', index)"
|
|||
|
|
>
|
|||
|
|
<t-grid-item
|
|||
|
|
:t-class="classPrefix + '__grid ' + classPrefix + '__grid-file'"
|
|||
|
|
:t-class-content="classPrefix + '__grid-content'"
|
|||
|
|
aria-role="presentation"
|
|||
|
|
custom-style="width: 100%"
|
|||
|
|
>
|
|||
|
|
<view
|
|||
|
|
:class="classPrefix + '__wrapper ' + (disabled ? classPrefix + '__wrapper--disabled' : '')"
|
|||
|
|
:style="gridItemStyle + ';'"
|
|||
|
|
:aria-role="ariaRole || getWrapperAriaRole(file)"
|
|||
|
|
:aria-label="ariaLabel || getWrapperAriaLabel(file)"
|
|||
|
|
>
|
|||
|
|
<t-image
|
|||
|
|
v-if="file.type !== 'video'"
|
|||
|
|
:data-file="file"
|
|||
|
|
:data-index="index"
|
|||
|
|
:t-class="classPrefix + '__thumbnail'"
|
|||
|
|
:custom-style="(imageProps && imageProps.style) || ''"
|
|||
|
|
:src="file.thumb || file.url"
|
|||
|
|
:mode="(imageProps && imageProps.mode) || 'aspectFill'"
|
|||
|
|
:error="(imageProps && imageProps.error) || 'default'"
|
|||
|
|
:lazy="(imageProps && imageProps.lazy) || false"
|
|||
|
|
:loading="(imageProps && imageProps.loading) || 'default'"
|
|||
|
|
:shape="(imageProps && imageProps.shape) || 'round'"
|
|||
|
|
:webp="(imageProps && imageProps.webp) || false"
|
|||
|
|
:show-menu-by-longpress="(imageProps && imageProps.showMenuByLongpress) || false"
|
|||
|
|
@click="onPreview($event, { file, index })"
|
|||
|
|
/>
|
|||
|
|
<video
|
|||
|
|
v-if="file.type === 'video'"
|
|||
|
|
:class="classPrefix + '__thumbnail'"
|
|||
|
|
:src="file.url"
|
|||
|
|
:poster="file.thumb"
|
|||
|
|
controls
|
|||
|
|
:autoplay="false"
|
|||
|
|
objectFit="contain"
|
|||
|
|
:data-file="file"
|
|||
|
|
@click.stop="onFileClick"
|
|||
|
|
/>
|
|||
|
|
<view
|
|||
|
|
v-if="file.status && file.status != 'done'"
|
|||
|
|
:class="classPrefix + '__progress-mask'"
|
|||
|
|
:data-index="index"
|
|||
|
|
:data-file="file"
|
|||
|
|
@click.stop="onFileClick"
|
|||
|
|
>
|
|||
|
|
<block v-if="file.status == 'loading'">
|
|||
|
|
<t-icon
|
|||
|
|
:t-class="classPrefix + '__progress-loading'"
|
|||
|
|
name="loading"
|
|||
|
|
size="48rpx"
|
|||
|
|
aria-hidden
|
|||
|
|
/>
|
|||
|
|
<view :class="classPrefix + '__progress-text'">
|
|||
|
|
{{ file.percent ? file.percent + '%' : '上传中...' }}
|
|||
|
|
</view>
|
|||
|
|
</block>
|
|||
|
|
<t-icon
|
|||
|
|
v-else
|
|||
|
|
:name="file.status == 'reload' ? 'refresh' : 'close-circle'"
|
|||
|
|
size="48rpx"
|
|||
|
|
aria-hidden
|
|||
|
|
/>
|
|||
|
|
<view
|
|||
|
|
v-if="file.status == 'reload' || file.status == 'failed'"
|
|||
|
|
:class="classPrefix + '__progress-text'"
|
|||
|
|
>
|
|||
|
|
{{ file.status == 'reload' ? '重新上传' : '上传失败' }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
v-if="tools.isBoolean(file.removeBtn) ? file.removeBtn : removeBtn"
|
|||
|
|
:class="classPrefix + '__close-btn hotspot-expanded'"
|
|||
|
|
:data-index="index"
|
|||
|
|
:data-url="file.url"
|
|||
|
|
aria-role="button"
|
|||
|
|
aria-label="删除"
|
|||
|
|
@click.stop="onDelete"
|
|||
|
|
>
|
|||
|
|
<t-icon
|
|||
|
|
name="close"
|
|||
|
|
size="32rpx"
|
|||
|
|
color="#fff"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</t-grid-item>
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
v-if="addBtn && customLimit > 0"
|
|||
|
|
:ref="classPrefix + '__drag-item'"
|
|||
|
|
:class="getDragItemClass(customFiles.length)"
|
|||
|
|
:style="getDragItemStyle(customFiles.length)"
|
|||
|
|
>
|
|||
|
|
<t-grid-item
|
|||
|
|
:t-class="classPrefix + '__grid'"
|
|||
|
|
:t-class-content="classPrefix + '__grid-content'"
|
|||
|
|
aria-label="上传"
|
|||
|
|
custom-style="width: 100%"
|
|||
|
|
@click="onAddTap"
|
|||
|
|
>
|
|||
|
|
<view
|
|||
|
|
:class="classPrefix + '__wrapper'"
|
|||
|
|
:style="gridItemStyle"
|
|||
|
|
>
|
|||
|
|
<slot name="add-content" />
|
|||
|
|
<block v-if="addContent">
|
|||
|
|
{{ addContent }}
|
|||
|
|
</block>
|
|||
|
|
<view
|
|||
|
|
v-else
|
|||
|
|
:class="classPrefix + '__add-icon ' + (disabled ? classPrefix + '__add-icon--disabled' : '')"
|
|||
|
|
>
|
|||
|
|
<t-icon name="add" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</t-grid-item>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</block>
|
|||
|
|
</t-grid>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
import TGrid from '../grid/grid';
|
|||
|
|
import TGridItem from '../grid-item/grid-item';
|
|||
|
|
import TIcon from '../icon/icon';
|
|||
|
|
import TImage from '../image/image';
|
|||
|
|
import { uniComponent } from '../common/src/index';
|
|||
|
|
import props from './props';
|
|||
|
|
import { prefix } from '../common/config';
|
|||
|
|
import { isOverSize, coalesce, isWxWork, isPC } from '../common/utils';
|
|||
|
|
import { isObject } from '../common/validator';
|
|||
|
|
import tools from '../common/utils.wxs';
|
|||
|
|
import {
|
|||
|
|
getWrapperAriaRole,
|
|||
|
|
getWrapperAriaLabel,
|
|||
|
|
} from './upload.computed.js';
|
|||
|
|
import {
|
|||
|
|
longPress,
|
|||
|
|
touchMove,
|
|||
|
|
touchEnd,
|
|||
|
|
baseDataObserver,
|
|||
|
|
listObserver,
|
|||
|
|
} from './drag.computed.js';
|
|||
|
|
import { parseEventDynamicCode } from '../common/event/dynamic';
|
|||
|
|
|
|||
|
|
|
|||
|
|
const name = `${prefix}-upload`;
|
|||
|
|
|
|||
|
|
const makeMethods = () => [
|
|||
|
|
[longPress, 'longPress'],
|
|||
|
|
[touchMove, 'touchMove'],
|
|||
|
|
[touchEnd, 'touchEnd'],
|
|||
|
|
[baseDataObserver, 'baseDataObserver'],
|
|||
|
|
[listObserver, 'listObserver'],
|
|||
|
|
].reduce((acc, item) => {
|
|||
|
|
const func = item[0];
|
|||
|
|
return {
|
|||
|
|
...acc,
|
|||
|
|
[item[1]](...args) {
|
|||
|
|
func.call(this, ...args);
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
}, {});
|
|||
|
|
|
|||
|
|
|
|||
|
|
export default uniComponent({
|
|||
|
|
name,
|
|||
|
|
options: {
|
|||
|
|
styleIsolation: 'shared',
|
|||
|
|
},
|
|||
|
|
controlledProps: [
|
|||
|
|
{
|
|||
|
|
key: 'files',
|
|||
|
|
event: 'success',
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
externalClasses: [`${prefix}-class`],
|
|||
|
|
components: {
|
|||
|
|
TGrid,
|
|||
|
|
TGridItem,
|
|||
|
|
TIcon,
|
|||
|
|
TImage,
|
|||
|
|
},
|
|||
|
|
props: {
|
|||
|
|
...props,
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
classPrefix: name,
|
|||
|
|
prefix,
|
|||
|
|
current: false,
|
|||
|
|
proofs: [],
|
|||
|
|
customFiles: [], // 内部动态修改的files
|
|||
|
|
customLimit: 0, // 内部动态修改的limit
|
|||
|
|
column: 4,
|
|||
|
|
dragBaseData: {}, // 拖拽所需要页面数据
|
|||
|
|
rows: 0, // 行数
|
|||
|
|
dragWrapStyle: '', // 拖拽容器的样式
|
|||
|
|
dragList: [], // 拖拽的数据列
|
|||
|
|
dragging: true, // 是否开始拖拽
|
|||
|
|
dragLayout: false, // 是否开启拖拽布局
|
|||
|
|
tools,
|
|||
|
|
|
|||
|
|
gridItemStyle: '',
|
|||
|
|
|
|||
|
|
fakeState: {},
|
|||
|
|
|
|||
|
|
dragItemClassList: [],
|
|||
|
|
dragItemStyleList: [],
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
files: {
|
|||
|
|
handler() {
|
|||
|
|
this.onWatchFilesLimit();
|
|||
|
|
},
|
|||
|
|
deep: true,
|
|||
|
|
},
|
|||
|
|
max: 'onWatchFilesLimit',
|
|||
|
|
draggable: {
|
|||
|
|
handler() {
|
|||
|
|
this.onWatchFilesLimit();
|
|||
|
|
},
|
|||
|
|
deep: true,
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
gridConfig: {
|
|||
|
|
handler() {
|
|||
|
|
this.updateGrid();
|
|||
|
|
},
|
|||
|
|
deep: true,
|
|||
|
|
},
|
|||
|
|
dragList: {
|
|||
|
|
handler(val) {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.listObserver(val);
|
|||
|
|
}, 33);
|
|||
|
|
},
|
|||
|
|
deep: true,
|
|||
|
|
immediate: true,
|
|||
|
|
},
|
|||
|
|
dragBaseData: {
|
|||
|
|
handler(val) {
|
|||
|
|
this.baseDataObserver(val);
|
|||
|
|
},
|
|||
|
|
deep: true,
|
|||
|
|
immediate: true,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.handleLimit(this.files, this.max);
|
|||
|
|
this.updateGrid();
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
getWrapperAriaRole,
|
|||
|
|
getWrapperAriaLabel,
|
|||
|
|
|
|||
|
|
...makeMethods(),
|
|||
|
|
|
|||
|
|
handleLimit(customFiles, max) {
|
|||
|
|
if (max === 0) {
|
|||
|
|
max = Number.MAX_SAFE_INTEGER;
|
|||
|
|
}
|
|||
|
|
this.customFiles = customFiles.length > max ? customFiles.slice(0, max) : customFiles;
|
|||
|
|
this.customLimit = max - customFiles.length;
|
|||
|
|
this.dragging = true;
|
|||
|
|
|
|||
|
|
this.initDragLayout();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
triggerSuccessEvent(files) {
|
|||
|
|
this._trigger('success', { files: [...this.customFiles, ...files] });
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
triggerFailEvent(err) {
|
|||
|
|
this.$emit('fail', err);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onFileClick(e) {
|
|||
|
|
const { file, index } = e.currentTarget.dataset;
|
|||
|
|
this.$emit('click', { index, file });
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 由于小程序暂时在ios上不支持返回上传文件的fileType，这里用文件的后缀来判断
|
|||
|
|
* @param mediaType
|
|||
|
|
* @param tempFilePath
|
|||
|
|
* @returns string
|
|||
|
|
* @link https://developers.weixin.qq.com/community/develop/doc/00042820b28ee8fb41fc4d0c254c00
|
|||
|
|
*/
|
|||
|
|
getFileType(mediaType, tempFilePath, fileType) {
|
|||
|
|
if (fileType) return fileType; // 如果有返回fileType就直接用
|
|||
|
|
if (mediaType.length === 1) {
|
|||
|
|
// 在单选媒体类型的时候直接使用单选媒体类型
|
|||
|
|
return mediaType[0];
|
|||
|
|
}
|
|||
|
|
// 否则根据文件后缀进行判读
|
|||
|
|
const videoType = ['avi', 'wmv', 'mkv', 'mp4', 'mov', 'rm', '3gp', 'flv', 'mpg', 'rmvb'];
|
|||
|
|
const temp = tempFilePath.split('.');
|
|||
|
|
const postfix = temp[temp.length - 1];
|
|||
|
|
if (videoType.includes(postfix.toLocaleLowerCase())) {
|
|||
|
|
return 'video';
|
|||
|
|
}
|
|||
|
|
return 'image';
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 选中文件之后，计算一个随机的短文件名
|
|||
|
|
getRandFileName(filePath) {
|
|||
|
|
const extIndex = filePath.lastIndexOf('.');
|
|||
|
|
const extName = extIndex === -1 ? '' : filePath.substr(extIndex);
|
|||
|
|
return parseInt(`${Date.now()}${Math.floor(Math.random() * 900 + 100)}`, 10).toString(36) + extName;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
checkFileSize(size, sizeLimit, fileType) {
|
|||
|
|
if (isOverSize(size, sizeLimit)) {
|
|||
|
|
let title = `${fileType === 'video' ? '视频' : '图片'}大小超过限制`;
|
|||
|
|
|
|||
|
|
if (isObject(sizeLimit)) {
|
|||
|
|
const { size: limitSize, message: limitMessage } = sizeLimit;
|
|||
|
|
title = limitMessage?.replace('{sizeLimit}', String(limitSize));
|
|||
|
|
}
|
|||
|
|
uni.showToast({ icon: 'none', title });
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
return false;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onDelete(e) {
|
|||
|
|
const { index } = e.currentTarget.dataset;
|
|||
|
|
this.deleteHandle(index);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
deleteHandle(index) {
|
|||
|
|
const { customFiles } = this;
|
|||
|
|
const delFile = customFiles[index];
|
|||
|
|
this.$emit('remove', { index, file: delFile });
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
updateGrid() {
|
|||
|
|
let { gridConfig = {} } = this;
|
|||
|
|
if (!isObject(gridConfig)) gridConfig = {};
|
|||
|
|
const { column = 4, width = 160, height = 160 } = gridConfig;
|
|||
|
|
|
|||
|
|
this.gridItemStyle = `width:${width}rpx;height:${height}rpx`;
|
|||
|
|
this.column = column;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
resetDragLayout() {
|
|||
|
|
this.dragBaseData = {};
|
|||
|
|
this.dragWrapStyle = '';
|
|||
|
|
this.dragLayout = false;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
initDragLayout() {
|
|||
|
|
const { draggable, disabled, customFiles } = this;
|
|||
|
|
if (!draggable || disabled || customFiles.length === 0) {
|
|||
|
|
this.resetDragLayout();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
this.initDragList();
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.initDragBaseData();
|
|||
|
|
}, 33)
|
|||
|
|
;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
initDragList() {
|
|||
|
|
let i = 0;
|
|||
|
|
const { column, customFiles, customLimit } = this;
|
|||
|
|
const dragList = [];
|
|||
|
|
customFiles.forEach((item, index) => {
|
|||
|
|
dragList.push({
|
|||
|
|
realKey: i, // 真实顺序
|
|||
|
|
sortKey: index, // 整体顺序
|
|||
|
|
tranX: `${(index % column) * 100}%`,
|
|||
|
|
tranY: `${Math.floor(index / column) * 100}%`,
|
|||
|
|
data: { ...item },
|
|||
|
|
});
|
|||
|
|
i += 1;
|
|||
|
|
});
|
|||
|
|
if (customLimit > 0) {
|
|||
|
|
const listLength = dragList.length;
|
|||
|
|
dragList.push({
|
|||
|
|
realKey: listLength, // 真实顺序
|
|||
|
|
sortKey: listLength, // 整体顺序
|
|||
|
|
tranX: `${(listLength % column) * 100}%`,
|
|||
|
|
tranY: `${Math.floor(listLength / column) * 100}%`,
|
|||
|
|
fixed: true,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
this.rows = Math.ceil(dragList.length / column);
|
|||
|
|
|
|||
|
|
this.dragList = dragList;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
initDragBaseData() {
|
|||
|
|
const { classPrefix, rows, column } = this;
|
|||
|
|
|
|||
|
|
let query;
|
|||
|
|
// #ifdef H5 || APP-PLUS
|
|||
|
|
query = uni.createSelectorQuery().in(this);
|
|||
|
|
// #endif
|
|||
|
|
if (!query) {
|
|||
|
|
query = this.createSelectorQuery();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
let selectorGridItem;
|
|||
|
|
let selectorGrid;
|
|||
|
|
// #ifdef H5 || APP-PLUS
|
|||
|
|
selectorGridItem = '.t-grid-item';
|
|||
|
|
selectorGrid = '.t-grid';
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
if (!selectorGridItem) {
|
|||
|
|
selectorGridItem = `.${classPrefix} >>> .t-grid-item`;
|
|||
|
|
selectorGrid = `.${classPrefix} >>> .t-grid`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
query.select(selectorGridItem).boundingClientRect();
|
|||
|
|
query.select(selectorGrid).boundingClientRect();
|
|||
|
|
query.selectViewport().scrollOffset();
|
|||
|
|
query.exec((res) => {
|
|||
|
|
const [{ width, height }, { left, top }, { scrollTop }] = res;
|
|||
|
|
const dragBaseData = {
|
|||
|
|
rows,
|
|||
|
|
classPrefix,
|
|||
|
|
itemWidth: width,
|
|||
|
|
itemHeight: height,
|
|||
|
|
wrapLeft: left,
|
|||
|
|
wrapTop: top + scrollTop,
|
|||
|
|
columns: column,
|
|||
|
|
};
|
|||
|
|
const dragWrapStyle = `height: ${rows * height}px`;
|
|||
|
|
|
|||
|
|
this.dragBaseData = dragBaseData;
|
|||
|
|
this.dragWrapStyle = dragWrapStyle;
|
|||
|
|
this.dragLayout = true;
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 为了给拖拽元素加上拖拽方法，同时控制不拖拽时不取消穿透
|
|||
|
|
const timer = setTimeout(() => {
|
|||
|
|
this.dragging = false;
|
|||
|
|
clearTimeout(timer);
|
|||
|
|
}, 0);
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
getPreviewMediaSources() {
|
|||
|
|
const previewMediaSources = [];
|
|||
|
|
this.customFiles.forEach((ele) => {
|
|||
|
|
const mediaSource = {
|
|||
|
|
url: ele.url,
|
|||
|
|
type: ele.type,
|
|||
|
|
poster: ele.thumb || undefined,
|
|||
|
|
};
|
|||
|
|
previewMediaSources.push(mediaSource);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
return previewMediaSources;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onPreview(e) {
|
|||
|
|
this.onFileClick(e);
|
|||
|
|
const { preview } = this;
|
|||
|
|
|
|||
|
|
if (!preview) return;
|
|||
|
|
|
|||
|
|
const usePreviewMedia = this.customFiles.some(file => file.type === 'video');
|
|||
|
|
if (usePreviewMedia) {
|
|||
|
|
this.onPreviewMedia(e);
|
|||
|
|
} else {
|
|||
|
|
this.onPreviewImage(e);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onPreviewImage(e) {
|
|||
|
|
const { index } = e.currentTarget.dataset;
|
|||
|
|
const urls = this.customFiles.filter(file => file.percent !== -1).map(file => file.url);
|
|||
|
|
const current = this.customFiles[index]?.url;
|
|||
|
|
uni.previewImage({
|
|||
|
|
urls,
|
|||
|
|
current,
|
|||
|
|
fail() {
|
|||
|
|
uni.showToast({ title: '预览图片失败', icon: 'none' });
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onPreviewMedia(e) {
|
|||
|
|
const { index: current } = e.currentTarget.dataset;
|
|||
|
|
const sources = this.getPreviewMediaSources();
|
|||
|
|
uni.previewMedia({
|
|||
|
|
sources,
|
|||
|
|
current,
|
|||
|
|
fail() {
|
|||
|
|
uni.showToast({ title: '预览视频失败', icon: 'none' });
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
uploadFiles(files) {
|
|||
|
|
return Promise.resolve().then(() => {
|
|||
|
|
// 开始调用上传函数
|
|||
|
|
const task = this.data.requestMethod(files);
|
|||
|
|
if (task instanceof Promise) {
|
|||
|
|
return task;
|
|||
|
|
}
|
|||
|
|
return Promise.resolve({});
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
startUpload(files) {
|
|||
|
|
// 如果传入了上传函数，则进度设为0并开始上传，否则跳过上传
|
|||
|
|
if (typeof this.requestMethod === 'function') {
|
|||
|
|
return this.uploadFiles(files)
|
|||
|
|
.then(() => {
|
|||
|
|
files.forEach((file) => {
|
|||
|
|
file.percent = 100;
|
|||
|
|
});
|
|||
|
|
this.triggerSuccessEvent(files);
|
|||
|
|
})
|
|||
|
|
.catch((err) => {
|
|||
|
|
this.triggerFailEvent(err);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 如果没有上传函数，success事件与微信api上传成功关联
|
|||
|
|
this.triggerSuccessEvent(files);
|
|||
|
|
|
|||
|
|
this.handleLimit(this.customFiles, this.max);
|
|||
|
|
return Promise.resolve();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onWatchFilesLimit() {
|
|||
|
|
this.handleLimit(this.files, this.max);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onAddTap() {
|
|||
|
|
const { disabled, mediaType, source } = this;
|
|||
|
|
if (disabled) return;
|
|||
|
|
if (source === 'media') {
|
|||
|
|
this.chooseMedia(mediaType);
|
|||
|
|
} else {
|
|||
|
|
this.chooseMessageFile(mediaType);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
chooseMedia(mediaType) {
|
|||
|
|
const { customLimit } = this;
|
|||
|
|
const { config, sizeLimit } = this;
|
|||
|
|
let func = 'chooseMedia';
|
|||
|
|
// #ifdef H5 || MP-ALIPAY
|
|||
|
|
func = 'chooseImage';
|
|||
|
|
// #endif
|
|||
|
|
// #ifdef MP-WEIXIN
|
|||
|
|
if (isPC || isWxWork) {
|
|||
|
|
func = 'chooseImage';
|
|||
|
|
}
|
|||
|
|
// #endif
|
|||
|
|
uni[func]({
|
|||
|
|
count: Math.min(20, customLimit),
|
|||
|
|
mediaType,
|
|||
|
|
...config,
|
|||
|
|
success: (res) => {
|
|||
|
|
const files = [];
|
|||
|
|
|
|||
|
|
// 支持单/多文件
|
|||
|
|
res.tempFiles.forEach((temp) => {
|
|||
|
|
const { size, fileType, tempFilePath, width, height, duration, thumbTempFilePath, ...res } = temp;
|
|||
|
|
|
|||
|
|
if (this.checkFileSize(size, sizeLimit, fileType)) return;
|
|||
|
|
|
|||
|
|
|
|||
|
|
const name = temp.name || this.getRandFileName(tempFilePath);
|
|||
|
|
files.push({
|
|||
|
|
name,
|
|||
|
|
type: this.getFileType(mediaType, temp.name || tempFilePath, fileType),
|
|||
|
|
url: tempFilePath,
|
|||
|
|
size,
|
|||
|
|
width,
|
|||
|
|
height,
|
|||
|
|
duration,
|
|||
|
|
thumb: thumbTempFilePath,
|
|||
|
|
percent: 0,
|
|||
|
|
...res,
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
this.afterSelect(files);
|
|||
|
|
},
|
|||
|
|
fail: (err) => {
|
|||
|
|
this.triggerFailEvent(err);
|
|||
|
|
},
|
|||
|
|
complete: (res) => {
|
|||
|
|
this.$emit('complete', res);
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
chooseMessageFile(mediaType) {
|
|||
|
|
const { customLimit } = this;
|
|||
|
|
const { config, sizeLimit } = this;
|
|||
|
|
uni.chooseMessageFile({
|
|||
|
|
count: Math.min(100, customLimit),
|
|||
|
|
type: Array.isArray(mediaType) ? 'all' : mediaType,
|
|||
|
|
...config,
|
|||
|
|
success: (res) => {
|
|||
|
|
const files = [];
|
|||
|
|
|
|||
|
|
// 支持单/多文件
|
|||
|
|
res.tempFiles.forEach((temp) => {
|
|||
|
|
const { size, type: fileType, path: tempFilePath, ...res } = temp;
|
|||
|
|
|
|||
|
|
if (this.checkFileSize(size, sizeLimit, fileType)) return;
|
|||
|
|
|
|||
|
|
const name = this.getRandFileName(tempFilePath);
|
|||
|
|
files.push({
|
|||
|
|
name,
|
|||
|
|
type: this.getFileType(mediaType, tempFilePath, fileType),
|
|||
|
|
url: tempFilePath,
|
|||
|
|
size,
|
|||
|
|
percent: 0,
|
|||
|
|
...res,
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
this.afterSelect(files);
|
|||
|
|
},
|
|||
|
|
fail: err => this.triggerFailEvent(err),
|
|||
|
|
complete: res => this.$emit('complete', res),
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
afterSelect(files) {
|
|||
|
|
this._trigger('select-change', {
|
|||
|
|
files: [...this.customFiles],
|
|||
|
|
currentSelectedFiles: [files],
|
|||
|
|
});
|
|||
|
|
this._trigger('add', { files });
|
|||
|
|
this.startUpload(files);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
dragVibrate(e) {
|
|||
|
|
const { vibrateType } = e;
|
|||
|
|
const { draggable } = this;
|
|||
|
|
const dragVibrate = coalesce(draggable?.vibrate, true);
|
|||
|
|
const dragCollisionVibrate = draggable?.collisionVibrate;
|
|||
|
|
if ((dragVibrate && vibrateType === 'longPress') || (dragCollisionVibrate && vibrateType === 'touchMove')) {
|
|||
|
|
uni.vibrateShort({
|
|||
|
|
type: 'light',
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
dragStatusChange(e) {
|
|||
|
|
const { dragging } = e;
|
|||
|
|
this.dragging = dragging;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
dragEnd(e) {
|
|||
|
|
const { dragCollisionList } = e;
|
|||
|
|
let files = [];
|
|||
|
|
if (dragCollisionList.length === 0) {
|
|||
|
|
files = this.customFiles;
|
|||
|
|
} else {
|
|||
|
|
files = dragCollisionList.reduce((list, item) => {
|
|||
|
|
const { realKey, data, fixed } = item;
|
|||
|
|
if (!fixed) {
|
|||
|
|
list[realKey] = {
|
|||
|
|
...data,
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
return list;
|
|||
|
|
}, []);
|
|||
|
|
}
|
|||
|
|
this.triggerDropEvent(files);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
triggerDropEvent(files) {
|
|||
|
|
const { transition } = this;
|
|||
|
|
if (transition.backTransition) {
|
|||
|
|
const timer = setTimeout(() => {
|
|||
|
|
this.$emit('drop', { files });
|
|||
|
|
clearTimeout(timer);
|
|||
|
|
}, transition.duration);
|
|||
|
|
} else {
|
|||
|
|
this.$emit('drop', { files });
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
getState() {
|
|||
|
|
return this.fakeState || {};
|
|||
|
|
},
|
|||
|
|
callMethod(...args) {
|
|||
|
|
return this[args[0]]?.(...args.slice(1));
|
|||
|
|
},
|
|||
|
|
parseEventDynamicCode,
|
|||
|
|
setDragItemClass(index, operation, val) {
|
|||
|
|
if (!this.dragItemClassList[index]) {
|
|||
|
|
this.dragItemClassList[index] = [];
|
|||
|
|
}
|
|||
|
|
const valList = Array.isArray(val) ? val : [val];
|
|||
|
|
if (operation === 'add') {
|
|||
|
|
this.dragItemClassList[index].push(...valList);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (operation === 'remove') {
|
|||
|
|
this.dragItemClassList[index] = this.dragItemClassList[index].filter(item => !valList.includes(item));
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
getDragItemClass(index) {
|
|||
|
|
const { classPrefix } = this;
|
|||
|
|
const base = [
|
|||
|
|
`${classPrefix}__drag-item`,
|
|||
|
|
];
|
|||
|
|
return [
|
|||
|
|
...base,
|
|||
|
|
...(this.dragItemClassList[index] || []),
|
|||
|
|
].join(' ');
|
|||
|
|
},
|
|||
|
|
setDragItemStyle(index, val) {
|
|||
|
|
if (!this.dragItemStyleList[index]) {
|
|||
|
|
this.dragItemStyleList[index] = [];
|
|||
|
|
}
|
|||
|
|
this.dragItemStyleList[index].push(val);
|
|||
|
|
},
|
|||
|
|
getDragItemStyle(index) {
|
|||
|
|
const { column, transition } = this;
|
|||
|
|
const base = [
|
|||
|
|
`width: ${100 / column}%`,
|
|||
|
|
`--td-upload-drag-transition-duration: ${transition.duration}ms`,
|
|||
|
|
`--td-upload-drag-transition-timing-function: ${transition.timingFunction}`,
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
return [
|
|||
|
|
...base,
|
|||
|
|
...(this.dragItemStyleList[index] || []),
|
|||
|
|
].join(';');
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
<style scoped>
|
|||
|
|
@import './upload.css';
|
|||
|
|
</style>
|