152 lines
3.6 KiB
Vue
152 lines
3.6 KiB
Vue
<template>
|
|
<Upload
|
|
:customRequest="customRequest"
|
|
listType="picture-card"
|
|
action="/"
|
|
:maxCount="limit"
|
|
:fileList="fileList"
|
|
:showUploadList="{ showPreviewIcon: true, showRemoveIcon: true }"
|
|
@change="onChange"
|
|
@preview="handlePreview"
|
|
/>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import { Upload, message } from 'ant-design-vue';
|
|
import { fetchImageUploadFile } from '@/api/all';
|
|
import axios from 'axios';
|
|
|
|
const fileList = ref([]);
|
|
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: [Array, String],
|
|
default: '',
|
|
},
|
|
limit: {
|
|
type: Number,
|
|
default: 0, // 0 表示不限制
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(['update:modelValue']);
|
|
|
|
const handleSuccess = (fileItem) => {
|
|
let response = fileItem.response;
|
|
response = JSON.parse(response);
|
|
if (response && response.data.file_url) {
|
|
if (props.limit === 1) {
|
|
emit('update:modelValue', response.data.file_url);
|
|
} else {
|
|
emit('update:modelValue', [...props.modelValue, response.data.file_url]);
|
|
}
|
|
}
|
|
};
|
|
|
|
watch(
|
|
() => props.modelValue,
|
|
async (value) => {
|
|
console.log(value, 'value');
|
|
if (value) {
|
|
fileList.value =
|
|
props.limit == 1
|
|
? [
|
|
{
|
|
name: '',
|
|
url: props.modelValue as string,
|
|
},
|
|
]
|
|
: (props.modelValue as string[]).map((item) => {
|
|
return {
|
|
name: '',
|
|
url: item,
|
|
};
|
|
});
|
|
} else {
|
|
fileList.value = [];
|
|
}
|
|
},
|
|
{ once: true },
|
|
);
|
|
|
|
let previousFileListLength = 0;
|
|
const handlePreview = (file) => {
|
|
console.log('Preview file:', file);
|
|
};
|
|
|
|
const onChange = (info) => {
|
|
const { fileList } = info;
|
|
|
|
// 如果删除了文件
|
|
if (fileList.length < previousFileListLength) {
|
|
if (props.limit === 1) {
|
|
if (fileList.length === 0) {
|
|
emit('update:modelValue', '');
|
|
}
|
|
} else {
|
|
if (fileList.length === 0) {
|
|
emit('update:modelValue', []);
|
|
} else {
|
|
let image_data = fileList.map((item) => item.url);
|
|
emit('update:modelValue', image_data);
|
|
}
|
|
}
|
|
}
|
|
|
|
// 处理上传成功的文件
|
|
if (info.file.status === 'done' && info.file.response) {
|
|
handleSuccess(info.file);
|
|
} else if (info.file.status === 'error') {
|
|
handleError(info.file.error);
|
|
}
|
|
|
|
previousFileListLength = fileList.length;
|
|
};
|
|
|
|
const beforeUpload = (file, files) => {
|
|
if (props.limit > 0 && files.length >= props.limit) {
|
|
message.warning(`最多只能上传 ${props.limit} 张图片`);
|
|
return false; // 阻止上传
|
|
}
|
|
return true;
|
|
};
|
|
|
|
const handleError = (error) => {
|
|
message.error('上传失败');
|
|
console.error(error);
|
|
};
|
|
|
|
const customRequest = async (option) => {
|
|
const { onProgress, onError, onSuccess, fileItem, name } = option;
|
|
try {
|
|
// 1. 获取预签名上传URL
|
|
const response = await fetchImageUploadFile({ suffix: getFileExtension(fileItem.file.name) });
|
|
const preSignedUrl = response?.data?.upload_url;
|
|
|
|
if (!preSignedUrl) {
|
|
throw new Error('未能获取有效的预签名上传地址');
|
|
}
|
|
console.log('preSignedUrl', preSignedUrl);
|
|
// 2. 使用预签名URL上传文件
|
|
const blob = new Blob([fileItem.file], { type: fileItem.file.type });
|
|
await axios.put(preSignedUrl, blob, {
|
|
headers: { 'Content-Type': fileItem.file.type },
|
|
});
|
|
|
|
onSuccess(JSON.stringify(response));
|
|
} catch (error) {
|
|
onError(error);
|
|
}
|
|
};
|
|
|
|
function getFileExtension(filename: string): string {
|
|
const match = filename.match(/\.([^.]+)$/);
|
|
return match ? match[1].toLowerCase() : '';
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 添加一些样式 */
|
|
</style>
|