文件上传

src/api/util.js

@@ -42,3 +42,11 @@ export function formatStepDesc (lst) {
   })
   return str
 }
+
+/**
+ * 获取文件后缀
+ */
+export function getFileExt (fileName) {
+  if (!fileName) return ''
+  return fileName.split('.').pop().toLowerCase()
+}

src/views/modules/common/upload-component.vue

@@ -18,7 +18,6 @@
           :auto-upload="false">
           <el-button v-show="!display" slot="trigger" size="small" type="primary">选取文件</el-button>
           <el-button v-show="!display" style="margin-left: 10px;" size="small" type="success" @click="submitUpload">开始上传</el-button>
-          <div v-show="!display" slot="tip" class="el-upload__tip">只能上传jpg/png文件，最多5张图片，且每张图片不超过10M</div>
         </el-upload>
       </el-col>
       <!-- 图片预览 -->
@@ -30,6 +29,7 @@
 
 <script>
   import { uploadUrl, downloadUrl, uploadFiles } from '@/api/file'
+  import {getFileExt} from '@/api/util'
   export default {
     name: 'upload-component',
     props: {
@@ -53,13 +53,22 @@
         type: Boolean,
         default: false
       },
-      fileList: {
+      fileObjList: {
         type: Array,
-        default: []
+        default: () => []
+      }
+    },
+    watch: {
+      fileList (newVal) {
+        this.$emit('uploadSuccess', newVal)
+      },
+      fileObjList (newVal) {
+        this.fileList = newVal
       }
     },
     data () {
       return {
+        fileList: [],
         uploadUrl: uploadUrl,
         previewPath: '',
         previewName: '',
@@ -67,9 +76,6 @@
       }
     },
     methods: {
-      // async init (fileList) {
-      //   this.fileList = fileList
-      // },
       // 上传
       submitUpload () {
         if (this.fileList.length === 0) {
@@ -97,11 +103,18 @@
       },
       // 预览
       handlePreview (file) {
-        if (file && file.url) {
-          // 获取文件路径
+        if (!file || !file.name || !file.url) {
+          this.$message.error('没有可预览的文件！')
+          return
+        }
+        let ext = getFileExt(file.name)
+        if (ext === ('jpg' || 'jpeg' || 'png' || 'gif')) {
           this.previewPath = downloadUrl + file.url
           this.previewName = file.name
           this.previewVisible = true
+        } else {
+          // 弹出新页面显示下载文件
+          window.open(downloadUrl + file.url)
         }
       },
       // 改变上传内容

src/views/modules/cus/communicate-add-or-update.vue

@@ -51,7 +51,8 @@
           </el-form-item>
       </el-row>
       <el-row class="my-row">
-        <upload-component :display="display" :title="'沟通扫描件'" :accept="'image/*'" :file-list="fileList"/>
+<!--        <upload-component :display="display" :title="'沟通扫描件'" :accept="'image/*'" :file-list="fileList"/>-->
+        <upload-component :display="display" :title="'沟通扫描件'" :accept="'*'" :file-obj-list="fileList" @uploadSuccess="uploadSuccess"/>
       </el-row>
       <div class="title"><span style="color: red">*</span> 订单产品明细</div>
       <el-row>
@@ -276,6 +277,9 @@
           productName: item.productName,
           notes: item.notes
         })
+      },
+      uploadSuccess (fileList) {
+        this.fileList = fileList
       }
     }
   }