上传文件显示文件名称

src/modules/viewer/components/common/upload.vue

@@ -10,23 +10,18 @@
       </template>
     </el-upload>
     <div class="file-list" v-if="fileList.length">
-      <div class="file-list-item" v-for="(fileUrl, index) in fileList" :key="index">
-        <a :href="fileUrl" target="_blank">
+      <div class="file-list-item" v-for="(item, index) in fileList" :key="index">
+        <a :href="item.url" :download="item.name" target="_blank">
           <i class="el-icon-document"></i>
-          {{ fileUrl | fileName }}
+          {{ item.name }}
         </a>
         <div>
-          <a
-            href="javascript:;"
-            @click="handleRemove(index)"
-            style="margin-right:10px;"
-            v-if="!disabled"
-          >
+          <a href="javascript:;" @click="handleRemove(index)" style="margin-right: 10px" v-if="!disabled">
             <el-tooltip effect="dark" content="删除">
               <i class="el-icon-delete"></i>
             </el-tooltip>
           </a>
-          <a :href="fileUrl" :download="fileUrl | fileName" target="_blank">
+          <a :href="item.url" :download="item.name" target="_blank">
             <el-tooltip effect="dark" content="下载">
               <i class="el-icon-download"></i>
             </el-tooltip>
@@ -55,29 +50,29 @@ export default {
     value: {
       immediate: true,
       handler(value) {
-        if (value) {
+        if (!value) {
+          return
+        }
+        let fileList = []
         if (Array.isArray(value)) {
-            this.fileList = value.map(item => {
-              return item.url || item
+          fileList = value.map(item => {
+            return { name: item.name || item, url: item.url || item }
           })
         } else {
-            this.fileList = [value]
-          }
+          fileList.push({ name: '附件下载', url: value })
         }
+        this.fileList = fileList
       }
     }
   },
-  filters: {
-    fileName(value) {
-      return value ? value.split('/').pop() : ''
-    }
-  },
   methods: {
     httpRequest(xhr) {
-      api.uploadFile({ file: xhr.file }).then(response => {
+      api
+        .uploadFile({ file: xhr.file })
+        .then(response => {
           if (response.success) {
             if (Array.isArray(this.value)) {
-            this.fileList.push(response.url)
+              this.fileList.push({ name: xhr.file.name, url: response.url })
               this.$emit('input', this.fileList)
             } else {
               this.fileList = [response.url]
@@ -85,6 +80,9 @@ export default {
             }
           }
         })
+        .catch(error => {
+          this.$message.error(error.message)
+        })
     },
     handleRemove(index) {
       this.fileList.splice(index, 1)