多文件上传修复

src/views/webSiteManagement/industryApplication/applicationList/addUpApp/index.vue

 <!--
  * @Author: your name
  * @Date: 2020-12-04 09:09:37
- * @LastEditTime: 2020-12-09 11:34:15
+ * @LastEditTime: 2020-12-09 13:53:34
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \rs-cloud-platform-ui\src\views\webSiteManagement\industryApplication\applicationList\addApp\index.vue
@@ -78,8 +78,15 @@
                 </el-radio-group>
             </el-form-item>
             <el-form-item label="上传样例" prop="fileList">
-                <el-upload class="upload-demo" action="#" :auto-upload="false" :on-preview="handlePreview" :on-remove="handleRemove" 
-                :before-remove="beforeRemove" multiple :limit="100" :on-exceed="handleExceed" :http-request="onUploadRequest" :file-list="form.fileList">
+                <el-upload class="upload-demo" 
+                action="#" 
+                :on-preview="handlePreview" 
+                :on-remove="handleRemove"  
+                :before-remove="beforeRemove" 
+                multiple 
+                :on-exceed="handleExceed" 
+                :http-request="onUploadRequest" 
+                :file-list="form.fileList">
                 <el-button size="small" type="primary">上传文件</el-button>
                 <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
               </el-upload>
@@ -100,10 +107,15 @@
         </el-form-item>
       </el-form>  
       </div>
+      <!-- 使用图片查看器预览当前缩略图 -->
+      <el-image-viewer v-if="currentIcon.showPreview" :on-close="closePreview" :url-list="[currentIcon.url]"/>
   </div>
 </template>
 
 <script>
+// 导入组件
+import ElImageViewer from "element-ui/packages/image/src/image-viewer";
+import { uploadFile } from "@/api/website/newsCategory/index";
 import singleImageX from '@/components/Upload/singleImageX';
 import KindEditor from "@/components/Kindeditor";
 import {
@@ -113,12 +125,12 @@ export default {
   name: 'addApp',
   components: {
     singleImageX,
-    KindEditor
+    KindEditor,
+    ElImageViewer
   },
   data(){
     return {
       rules:{
-        //title coverImg detailImg industry region collectTime origin achievement resolvpower isSample isCustomized fileList introduction
         title: [{ required: true, message: '请输入应用名称', trigger: 'blur' }],
         coverImg: [{ required: true, message: '请上传封面图', trigger: 'blur' }],
         detailImg: [{ required: true, message: '请上传详情图', trigger: 'blur' }],
@@ -147,6 +159,18 @@ export default {
         isCustomized: '是',// 是否定制
         fileList: [],// 样例图片路径集合
         introduction: '', // 简介
+      },
+      currentIcon: {
+        showPreview: false,
+        url: []
+      },
+    }
+  },
+  watch:{
+    "form.fileList":{
+      deep: true,
+      handler: function(newVal){
+        console.log("newVal=>",newVal)
       }
     }
   },
@@ -191,6 +215,10 @@ export default {
       this.$bus.$emit('hideThreeRoute',true)
   },
   methods: {
+    // 关闭图片查看器
+    closePreview() {
+      this.currentIcon.showPreview = false;
+    },
     onContentChange (val) {
       console.log(val)
     },
@@ -202,12 +230,53 @@ export default {
       this.$bus.$emit('hideThreeRoute',true)
     },
     // 上传样例Begin
-    handlePreview(file) {
-      console.log("handlePreview=>",file);
+    onUploadRequest(data) {
+      /**
+       * [{"filename":"文件名","size":"文件大小","url":"文件路径"}]
+       */
+      console.log("uploadData=>",data)
+      let filename = data.file.name
+      let size = data.file.size
+      let fileObj = data.file;
+      //获取图片详情信息
+      let imgInfo = {};
+      let temp = URL.createObjectURL(fileObj)
+      let img = new Image();
+      img.src = temp;
+      img.onload = function () {
+        imgInfo.width = img.width;
+        imgInfo.height = img.height;
+      }
+      imgInfo.size = fileObj.size;
+      imgInfo.type = fileObj.type;
+      // FormData 对象
+      let form = new FormData();
+      // 文件对象
+      form.append("file", fileObj);
+      uploadFile(form).then(res => {
+        this.uploading = false;
+        if (res.status == 200) {
+          console.log("上传文件成功,获取到的文件路径为=>",res.data)
+          this.form.fileList.push({
+            name: filename,
+            size: size,
+            url: res.data
+          })
+        } else {
+          this.$message.error(res.message)
+        }
+      })
+    },
+    handlePreview(file,fileList) {
+      let obj = this.form.fileList.find(element => element.name == file.name)
+      let url = obj ? obj.url : ""
+      console.log("url=>",url)
+      this.currentIcon.showPreview = true 
+      this.currentIcon.url = url
     },
-    handleRemove(file, fileList) {
-      console.log("handleRemove=>",file);
-      console.log("handleRemove=>",fileList);
+    handleRemove(file,fileList) {
+      let index = this.form.fileList.findIndex(ele => ele.name == file.name)
+      index != -1 && (this.form.fileList.splice(index,1))
     },
     beforeRemove(file, fileList) {
       return this.$confirm(`确定移除 ${ file.name }？`);
@@ -215,9 +284,6 @@ export default {
     handleExceed(files, fileList) {
       this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
     },
-    onUploadRequest(data) {
-      console.log("uploadData=>",data)
-    },
     // 上传样例End
     onCoverPreview(url){   
       this.form.coverImg = url