| | |
| | | <template> |
| | | <div> |
| | | <a-upload |
| | | action="/" |
| | | v-model:fileList="fileList" |
| | | :limit="limit" |
| | | :auto-upload="false" |
| | | :accept="xlsx" |
| | | :limit="props.limit" |
| | | @change="handleChange" |
| | | @before-remove="beforeRemove" |
| | | @before-upload="beforeUpload" |
| | | image-preview |
| | | > |
| | | <template #upload-button> |
| | |
| | | import { computed, ref, onMounted, watch, watchEffect } from 'vue'; |
| | | import { uploadAndParse } from '@/api/session'; |
| | | import { useUserStore } from '@/store'; |
| | | import { Message } from '@arco-design/web-vue'; |
| | | import EventBus from '@/utils/EventBus'; |
| | | |
| | | const userStore = useUserStore(); |
| | | const props = defineProps({ |
| | | limit: { |
| | | type: Number, |
| | | default: 3, |
| | | default: 6, |
| | | }, |
| | | typeXLse: Boolean, |
| | | sessionId: String, |
| | | action: String, // 上传的服务器地址 |
| | | url: String, //回显的文件地址 |
| | |
| | | ]); |
| | | const urls = computed(() => props.url); |
| | | const fileList = ref([]); |
| | | const filesData = ref([]); |
| | | const uploaditemList = ref([]); |
| | | |
| | | watch( |
| | | () => [props.url, props.sessionId], |
| | |
| | | url: item, |
| | | })); |
| | | } |
| | | EventBus.on('queryAgent', (eventData) => { |
| | | // 更新组件的数据 |
| | | if (eventData) { |
| | | if (fileList.value.length == 1) { |
| | | fileList.value = []; |
| | | } else { |
| | | fileList.value.forEach((item) => { |
| | | if (item.name != eventData.name) { |
| | | fileList.value = []; |
| | | fileList.value.push(item); |
| | | } |
| | | }); |
| | | } |
| | | } else { |
| | | fileList.value = []; |
| | | } |
| | | }); |
| | | }); |
| | | |
| | | // console.log(urls.value, 8988); |
| | | const beforeRemove = (file) => { |
| | | emit('handleRemove'); |
| | | fileList.value = []; |
| | | }; |
| | | |
| | | const handleChange = (fileList) => { |
| | | // emit('update:fileList', fileList); |
| | | |
| | | // const successFiles = fileList.filter((item) => item.status === 'done'); |
| | | // if (successFiles.length > 0) { |
| | | // emit( |
| | | // 'success', |
| | | // successFiles.map((item) => item.response.data) |
| | | // ); |
| | | // emit( |
| | | // 'selectFileCallback', |
| | | // successFiles.map((item) => item.response.data) |
| | | // ); |
| | | const formData = new FormData(); |
| | | for (let i = 0; i < fileList.length; i++) { |
| | | formData.append('file', fileList[i].file); |
| | | formData.append('conversation_id', props.sessionId); |
| | | // formData.append('parser_config', ''); |
| | | // if (!parser_id.value) { |
| | | // formData.append( |
| | | // 'parser_id', |
| | | // getIconByExtension(successFiles[i].name) |
| | | // ); |
| | | // } else { |
| | | // formData.append('parser_id', parser_id.value); |
| | | // } |
| | | } |
| | | uploadAndParse(formData).then((res) => { |
| | | onFileSelectedLoading.value = false; |
| | | if (res.code == 200) { |
| | | cancel(); |
| | | // uploaditemList.value = []; |
| | | emit('selectFileCallback', uploaditemList.value); |
| | | Message.success('上传成功'); |
| | | } else { |
| | | Message.error('上传失败'); |
| | | } |
| | | const dataFile = compareArr(uploaditemList.value, fileList).uniqueToSecond; |
| | | uploaditemList.value = fileList.map((item, index) => { |
| | | return { |
| | | index: index, |
| | | name: item.name, |
| | | size: (item.file.size / 1024).toFixed(2) + 'K', |
| | | onFileSelectedLoading: false, |
| | | textName: '', |
| | | }; |
| | | }); |
| | | // } |
| | | |
| | | filesData.value = fileList; |
| | | emit('selectFileCallback', uploaditemList.value, dataFile); |
| | | fileList.value = []; |
| | | }; |
| | | |
| | | //数组比较 |
| | | const compareArr = (arr1, arr2) => { |
| | | const uniqueToFirst = arr1.filter( |
| | | (item1) => !arr2.some((item2) => item1.name == item2.name) |
| | | ); |
| | | |
| | | const uniqueToSecond = arr2.filter( |
| | | (item2) => !arr1.some((item1) => item1.name == item2.name) |
| | | ); |
| | | |
| | | return { |
| | | uniqueToFirst, |
| | | uniqueToSecond, |
| | | }; |
| | | }; |
| | | |
| | | const typeXLse = computed(() => { |
| | | return props.type; |
| | | }); |
| | | |
| | | function beforeUpload(resolve) { |
| | | if (typeXLse) { |
| | | return new Promise((resolve) => { |
| | | resolve(true); |
| | | }); |
| | | } |
| | | let name = ['xlsx', 'xls']; |
| | | let fileName = resolve.name.split('.'); |
| | | let fileExt = fileName[fileName.length - 1]; |
| | | let isTypeOk = name.indexOf(fileExt) >= 0; |
| | | if (!isTypeOk) { |
| | | Message.warning('只支持上传:xlsx,xls'); |
| | | } else { |
| | | return new Promise((resolve) => { |
| | | resolve(true); |
| | | }); |
| | | } |
| | | } |
| | | </script> |