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 @@
+ :http-request="handleUpload" :on-success="handleSuccess" :on-progress="handleProgress" :on-error="handleError"
+ :on-exceed="handleExceed" :accept="props.accept" :limit="props.limit" multiple>
@@ -15,11 +15,11 @@
-
+
@@ -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')