Merge branch 'master' of https://e.coding.net/g-cphe0354/cashier/cashier-web into ymf

src/components/Upload/MultiImageUpload.vue

@@ -1,8 +1,8 @@
 <!-- 图片上传组件 -->
 <template>
   <el-upload v-model:file-list="fileList" list-type="picture-card" :before-upload="handleBeforeUpload"
-    :http-request="handleUpload" :on-success="handleSuccess" :on-error="handleError" :on-exceed="handleExceed"
-    :accept="props.accept" :limit="props.limit" multiple>
+    :http-request="handleUpload" :on-success="handleSuccess" :on-progress="handleProgress" :on-error="handleError"
+    :on-exceed="handleExceed" :accept="props.accept" :limit="props.limit" multiple>
     <el-icon>
       <Plus />
     </el-icon>
@@ -15,11 +15,11 @@
             <el-icon><zoom-in /></el-icon>
           </span>
           <!-- 删除 -->
-          <span @click="handleRemove(file.url!)">
+          <!-- <span @click="handleRemove(file.url!)">
             <el-icon>
               <Delete />
             </el-icon>
-          </span>
+          </span> -->
         </span>
       </div>
     </template>
@@ -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<string[]>,
   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);
 };
 

src/components/mycomponents/addImgconfig/imageComponent.vue

@@ -14,7 +14,7 @@
       </li>
     </ul>
     <el-dialog v-model="showUpload" title="">
-      <MultiImageUpload v-model="fileList" />
+      <MultiImageUpload v-model="fileList" @upDataEvent="upDataEvent" />
       <template #footer>
         <el-button type="primary" :loading="loadings" @click="doSubmit">确认</el-button>
       </template>
@@ -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')