<template>
|
<nut-uploader
|
v-if="$slots.default"
|
v-model:file-list="innerFileList"
|
multiple
|
:media-type="['image']"
|
:before-xhr-upload="beforeXhrUpload"
|
@failure="handleFailure"
|
:maximize="maximize"
|
>
|
<template #upload-icon>
|
<slot name="upload-icon"></slot>
|
</template>
|
<template #default>
|
<slot></slot>
|
</template>
|
<template #extra-img>
|
<slot name="extra-img"></slot>
|
</template>
|
</nut-uploader>
|
<nut-uploader
|
v-else
|
v-model:file-list="innerFileList"
|
multiple
|
:media-type="['image']"
|
:before-xhr-upload="beforeXhrUpload"
|
@failure="handleFailure"
|
:maximize="maximize"
|
>
|
<template #upload-icon>
|
<slot name="upload-icon"></slot>
|
</template>
|
<template #extra-img="extraImgProps">
|
<slot name="extra-img" v-bind="extraImgProps"></slot>
|
</template>
|
</nut-uploader>
|
</template>
|
|
<script setup lang="ts">
|
import { ossUpload } from '@12333/utils/oss';
|
import { guid } from '@12333/utils';
|
import { FileItem } from '@nutui/nutui-taro/dist/types/__VUE/uploader/type';
|
import { UploadOptions } from '@nutui/nutui-taro/dist/types/__VUE/uploader/uploader';
|
import Taro from '@tarojs/taro';
|
|
defineOptions({
|
name: 'Uploader',
|
});
|
|
type Props = {
|
fileList: FileItem[];
|
onMySuccess?: (file: FileItem) => any;
|
limitFileSize?: number;
|
};
|
|
const props = withDefaults(defineProps<Props>(), {
|
limitFileSize: 2,
|
});
|
|
const emit = defineEmits<{
|
(e: 'update:fileList', list: FileItem[]): void;
|
}>();
|
|
const innerFileList = computed({
|
get() {
|
return props.fileList;
|
},
|
set(val) {
|
emit('update:fileList', val);
|
},
|
});
|
|
const maximize = computed(() => props.limitFileSize * 1024 * 1024);
|
|
const beforeXhrUpload = (taroUploadFile: any, options: UploadOptions) => {
|
const current = innerFileList.value.find((x) => x.path === options.taroFilePath);
|
const uploadTask = ossUpload({
|
filePath: options.taroFilePath,
|
fileType: options.fileType,
|
name: options.name || 'file',
|
customFileName: () => guid(),
|
showLoading: false,
|
success(response: { errMsg: any; statusCode: number; data: string }, ossRes) {
|
options.onSuccess?.(response, options);
|
current.name = ossRes.name;
|
current.path = ossRes.path;
|
current.url = ossRes.url;
|
// innerFileList.value.map((x) => {
|
// if (x.uid === current.uid) {
|
// return {
|
// ...x,
|
// name: ossRes.name,
|
// path: ossRes.path,
|
// url: ossRes.url,
|
// };
|
// }
|
// return { ...x };
|
// })
|
// emit('update:fileList', innerFileList.value);
|
nextTick(() => {
|
props.onMySuccess?.(innerFileList.value.find((x) => x.path === ossRes.path));
|
});
|
},
|
fail(e: any) {
|
console.log('e: ', e);
|
options.onFailure?.(e, options);
|
},
|
});
|
|
options.onStart?.(options);
|
// uploadTask?.progress(
|
// (res: { progress: any; totalBytesSent: any; totalBytesExpectedToSend: any }) => {
|
// options.onProgress?.(res, options);
|
// // console.log('上传进度', res.progress);
|
// // console.log('已经上传的数据长度', res.totalBytesSent);
|
// // console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend);
|
// }
|
// );
|
// uploadTask.abort(); // 取消上传任务
|
};
|
|
function handleFailure(ev) {
|
console.log('Failure ev: ', ev);
|
}
|
</script>
|
