commit

src/main/resources/static/components/plugins/sysUpload/h5Index.vue

@@ -1,10 +1,18 @@
 <template>
-  <div>
+  <div class="h5-file-upload">
+    <div v-if="upload_mode === 'file' && fileList.length" class="h5-file-list">
+      <div class="h5-file-item" v-for="(file, index) in fileList" :key="file.url || file.name || index">
+        <van-icon name="description" class="h5-file-icon"></van-icon>
+        <div class="h5-file-name van-ellipsis">{{ getFileDisplayName(file) }}</div>
+        <van-icon name="cross" class="h5-file-delete" @click.stop="deleteFile(index)"></van-icon>
+      </div>
+    </div>
     <van-uploader
         v-model="fileList"
         :before-read="beforeRead"
         :after-read="afterRead"
         :before-delete="beforeDelete"
+        :preview-image="upload_mode !== 'file'"
         multiple
         progress
         :accept="accept"
@@ -142,6 +150,15 @@ module.exports = {
     }
   },
   methods: {
+    // 文件模式使用自定义预览格，优先展示上传时记录的原始文件名。
+    getFileDisplayName(file) {
+      return file.displayName || file.originalName || file.name || (file.file ? file.file.name : "") || ""
+    },
+    // 自定义预览格删除后同步父组件，避免表单继续提交已删除附件。
+    deleteFile(index) {
+      this.fileList.splice(index, 1)
+      this.$emit("update:value", this.fileList)
+    },
     beforeDelete(file) {
       this.fileList = this.fileList.filter((f) => f.url !== file.url)
       this.$emit("update:value", this.fileList)
@@ -178,33 +195,43 @@ module.exports = {
       if (valid) {
         return true
       }
-      this.$toast(`文件只能是 ${this.accept} 格式！`)
+      this.$toast("文件只能是 " + this.accept + " 格式！")
       return false
     },
     afterRead(files) {
-      this.fileList.map((f) => {
-        if (f.file && f.file.name === files.file.name) {
-          f.status = "loading"
-        }
-      })
-      const uploadPromises = this.fileList
-          .filter((f) => f.status === "loading")
+      const readFiles = Array.isArray(files) ? files : [files]
+      const uploadPromises = readFiles
+          .filter((f) => f.file)
           .map((f) => {
             const formData = new FormData()
             formData.append("file", f.file)
+            this.$set(f, "status", "loading")
             return this.$axios.post(this.action, formData).then((resp) => {
               if (resp.code === 0) {
-                f.name = f.file.name
-                f.size = f.file.size
-                f.status = null
-                f.url = resp.data
-                f.response = resp
-                f.percentage = 100
-                f.isImage = true
-                delete f.file
-                delete f.content
+                const fileName = f.file.name
+                const fileExt = fileName.split(".").pop().toLowerCase()
+                let fileIndex = this.fileList.indexOf(f)
+                if (fileIndex === -1) {
+                  fileIndex = this.fileList.findIndex((item) => {
+                    return item.file && item.file.name === fileName && item.file.size === f.file.size
+                  })
+                }
+                const uploadFile = {
+                  displayName: fileName,
+                  originalName: fileName,
+                  name: fileName,
+                  size: f.file.size,
+                  status: null,
+                  url: resp.data,
+                  response: resp,
+                  percentage: 100,
+                  isImage: ["jpg", "jpeg", "png", "gif", "bmp", "webp"].includes(fileExt)
+                }
+                if (fileIndex > -1) {
+                  this.$set(this.fileList, fileIndex, uploadFile)
+                }
               } else {
-                f.status = "fail"
+                this.$set(f, "status", "fail")
               }
             })
           })
@@ -241,4 +268,47 @@ module.exports = {
 .van-uploader__wrapper {
   margin-left: 0;
 }
+
+.h5-file-upload {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.h5-file-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.h5-file-item {
+  position: relative;
+  box-sizing: border-box;
+  width: 80px;
+  height: 80px;
+  padding: 14px 6px 8px;
+  color: #646566;
+  text-align: center;
+  background-color: #f7f8fa;
+}
+
+.h5-file-icon {
+  margin-top: 8px;
+  font-size: 22px;
+}
+
+.h5-file-name {
+  margin-top: 8px;
+  font-size: 12px;
+}
+
+.h5-file-delete {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 2px;
+  color: #fff;
+  font-size: 12px;
+  background-color: rgba(0, 0, 0, .65);
+}
 </style>