diff --git a/src/components/Upload/MultiImageUpload.vue b/src/components/Upload/MultiImageUpload.vue index 930ad60..92aab10 100644 --- a/src/components/Upload/MultiImageUpload.vue +++ b/src/components/Upload/MultiImageUpload.vue @@ -1,8 +1,8 @@ @@ -71,10 +71,10 @@ const props = defineProps({ default: "image/*", // 默认支持所有图片格式 ,如果需要指定格式,格式如下:'.png,.jpg,.jpeg,.gif,.bmp' }, }); - +const emit = defineEmits(['upDataEvent']) const previewVisible = ref(false); // 是否显示预览 const previewImageIndex = ref(0); // 预览图片的索引 - +const progress = ref(0); const modelValue = defineModel("modelValue", { type: [Array] as PropType, required: true, @@ -96,14 +96,20 @@ function handleRemove(imageUrl: string) { } }); } - +function handleProgress(event: any, file: any, fileList: any) { + // console.log("handleProgress", evt, file, fileList); + // this.progress = Math.round(event.percent); // Element UI 已计算好百分比 + // console.log(`文件 ${file.name} 上传进度: ${this.progress}%`); + // progress.value = Math.round(event.percent); + console.log("文件上传进度", Math.round(event.percent)); +} /** * 上传前校验 */ function handleBeforeUpload(file: UploadRawFile) { + // 校验文件类型:虽然 accept 属性限制了用户在文件选择器中可选的文件类型,但仍需在上传时再次校验文件实际类型,确保符合 accept 的规则 const acceptTypes = props.accept.split(",").map((type) => type.trim()); - // 检查文件格式是否符合 accept const isValidType = acceptTypes.some((type) => { if (type === "image/*") { @@ -128,6 +134,7 @@ function handleBeforeUpload(file: UploadRawFile) { ElMessage.warning("上传图片不能大于" + props.maxFileSize + "M"); return false; } + emit('upDataEvent', true) return true; } @@ -145,7 +152,6 @@ function handleUpload(options: UploadRequestOptions) { Object.keys(props.data).forEach((key) => { formData.append(key, props.data[key]); }); - FileAPI.upload(formData) .then((data) => { resolve(data); @@ -168,6 +174,7 @@ function handleExceed(files: File[], uploadFiles: UploadUserFile[]) { */ const handleSuccess = (fileInfo: FileInfo, uploadFile: UploadUserFile) => { ElMessage.success("上传成功"); + emit('upDataEvent', false) const index = fileList.value.findIndex((file) => file.uid === uploadFile.uid); if (index !== -1) { fileList.value[index].url = fileInfo; @@ -181,6 +188,7 @@ const handleSuccess = (fileInfo: FileInfo, uploadFile: UploadUserFile) => { */ const handleError = (error: any) => { console.log("handleError"); + emit('upDataEvent', false) ElMessage.error("上传失败: " + error.message); }; diff --git a/src/components/mycomponents/addImgconfig/imageComponent.vue b/src/components/mycomponents/addImgconfig/imageComponent.vue index 01c3ecd..a7cb0f5 100644 --- a/src/components/mycomponents/addImgconfig/imageComponent.vue +++ b/src/components/mycomponents/addImgconfig/imageComponent.vue @@ -14,7 +14,7 @@ - + @@ -41,18 +41,19 @@ export default { mounted() { }, methods: { + upDataEvent(d) { + this.loadings = d + }, upShowUp() { this.showUpload = true; }, async doSubmit() { if (this.fileList.length) { - this.loadings = true let res = await API.add({ pictureClassifyId: this.activedata, urls: this.fileList }) if (res.code == 200) { - this.loadings = false this.showUpload = false; this.fileList = [] this.$emit('getList')