修改文件批量上传组件，修改成拖拽

src/components/K-FileUpload/index.vue

@@ -1,20 +1,22 @@
 <template>
   <div class="upload-file">
-    <el-upload
-      multiple
-      :action="uploadFileUrl"
-      :before-upload="handleBeforeUpload"
-      :file-list="fileList"
-      :limit="limit"
-      :accept="accept"
-      :http-request="uploadFile"
-      :show-file-list="false"
-      :headers="headers"
-      class="upload-file-uploader"
-      ref="fileUpload"
-    >
+    <el-upload 
+    multiple
+    drag 
+    :action="uploadFileUrl" 
+    :before-upload="handleBeforeUpload" 
+    :on-error="uploadedSuccessfully"
+    :on-success="handleUploadSuccess"
+      :file-list="fileList" :limit="limit" 
+      :accept="accept" 
+      :http-request="uploadFile" 
+      :show-file-list="true"
+      :on-remove="handleDelete"
+      :headers="headers" class="upload-file-uploader" ref="fileUpload">
+      <i class="el-icon-upload"></i>
       <!-- 上传按钮 -->
-      <el-button size="mini" type="primary">{{ btnName }}</el-button>
+      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+      <!-- <el-button size="mini" type="primary">{{ btnName }}</el-button> -->
       <!-- 上传提示 -->
       <div class="el-upload__tip" slot="tip" v-if="showTip">
         请上传
@@ -25,22 +27,22 @@
     </el-upload>
 
     <!-- 文件列表 -->
-    <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
+    <!-- <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
       <li :key="file.url" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
-        <el-link :href="getFileUrl(file.name)" :underline="false" target="_blank">
-          <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
+        <el-link :href="getFileUrl(file)" :underline="false" target="_blank">
+          <span class="el-icon-document"> {{ getFileName(file) }} </span>
         </el-link>
         <div class="ele-upload-list__item-content-action">
           <el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>
         </div>
       </li>
-    </transition-group>
+    </transition-group> -->
   </div>
 </template>
 
 <script>
-import {getToken} from "@/utils/auth";
-import {upload} from "@/api/system/public";
+import { getToken } from "@/utils/auth";
+import { upload } from "@/api/system/public";
 
 export default {
   name: "K-FileUpload",
@@ -48,6 +50,7 @@ export default {
 
     // 值
     value: [String, Object, Array],
+    defaultValue: [String, Object, Array],
     // 数量限制
     limit: {
       type: Number,
@@ -82,31 +85,50 @@ export default {
         Authorization: "Bearer " + getToken(),
       },
       fileList: [],
+      fileValueList:[],
       accept: ".pdf,.jpg,.png,.bmp",
     };
   },
   watch: {
-    value: {
+    defaultValue:{
       handler(val) {
         if (val) {
           let temp = 1;
+          // this.fileList=val;
           // 首先将值转为数组
           const list = Array.isArray(val) ? val : this.value.split(',');
+          console.log("watch fileList", list)
           // 然后将数组转为对象数组
           this.fileList = list.map(item => {
             if (typeof item === "string") {
-              item = {name: item, url: item};
+              // console.log("watch fileList item", item)
+              let itemObj = JSON.parse(item);
+              // console.log("watch fileList itemObj", itemObj)
+              if ('name' in itemObj && 'url' in itemObj) {
+                item=itemObj
+              }
+              else {
+                item = { name: item, url: item };
+              }
             }
             item.uid = item.uid || new Date().getTime() + temp++;
             return item;
           });
+          this.fileValueList=[...this.fileList];
         } else {
           this.fileList = [];
+          this.fileValueList=[];
           return [];
         }
       },
       deep: true,
       immediate: true
+    },
+    value: {
+      handler(val) {
+      },
+      deep: true,
+      immediate: true
     }
   },
   computed: {
@@ -128,6 +150,8 @@ export default {
           return false;
         }
       }
+    
+
       // 校检文件大小
       if (this.fileSize) {
         const isLt = file.size / 1024 / 1024 < this.fileSize;
@@ -136,6 +160,13 @@ export default {
           return false;
         }
       }
+
+      if(this.fileList.findIndex(x=>x.name==file.name)>-1)
+      {
+        this.$modal.msgError(`不能上传相同名称的文件或图片!`);
+          return false;
+      }
+
       this.$modal.loading("正在上传文件，请稍候...");
       this.number++;
       return true;
@@ -150,32 +181,33 @@ export default {
       this.$modal.closeLoading()
     },
     // 上传成功回调
-    handleUploadSuccess(res, file) {
-      if (res.code === 200) {
-        this.uploadList.push({name: res.data.url, url: res.data.url});
-        this.uploadedSuccessfully();
-      } else {
-        this.number--;
-        this.$modal.closeLoading();
-        this.$modal.msgError(res.msg);
-        this.$refs.fileUpload.handleRemove(file);
-        this.uploadedSuccessfully();
-      }
+    handleUploadSuccess(res, file,fileList) {
+      console.log("handleUploadSuccess", res, file, fileList);
+      this.fileList=fileList;
+      this.$emit("input", this.listToTagObj(this.fileValueList));
     },
     // 删除文件
-    handleDelete(index) {
-      this.fileList.splice(index, 1);
-      this.$emit("input", this.listToString(this.fileList));
-    },
-    // 上传结束处理
-    uploadedSuccessfully() {
-      if (this.number > 0 && this.uploadList.length === this.number) {
-        this.fileList = this.fileList.concat(this.uploadList);
-        this.uploadList = [];
-        this.number = 0;
-        this.$emit("input", this.listToString(this.fileList));
-        this.$modal.closeLoading();
+    handleDelete(item) {
+      if (item && item.status === "success") {
+        console.log("handleDelete index",item)
+      this.fileList.splice(item, 1);
+      console.log("handleDelete",item,this.fileValueList)
+
+      let index = this.fileValueList.findIndex(x=>x.name==item.name);
+      console.log("handleDelete",index,this.fileValueList)
+      if(index>-1)
+      {
+        this.fileValueList.splice(index, 1);
       }
+      //this.fileValueList.splice(item, 1);
+      console.log("handleDelete deleted",this.fileValueList)
+      
+      this.$emit("input", this.listToTagObj(this.fileValueList));
+    }
+    
+    },
+    // 上传失败结束处理 必须调用，否则失败文件也会显示
+    uploadedSuccessfully(err,file,fileList) {
     },
     // 获取文件名称
     getFileName(name) {
@@ -200,17 +232,15 @@ export default {
         /*上传成功*/
         this.$modal.closeLoading();
         //let imgUrl = process.env.VUE_APP_BASE_API + res.data.url;
-        let arr = [];
-        arr.push({name: res.data.realName, url: res.data.url})
-        this.fileList = arr;
-        this.$emit("input", this.fileList);
+        let arr = [];        
+        arr.push({ name: res.data.realName, url: res.data.url });        
+        this.fileValueList = this.fileValueList.concat(arr);
+        // console.log("uploadFile", this.fileList)
+        fileObj.onSuccess();
       }).catch(err => {
         /*上传失败*/
         this.$modal.closeLoading();
-        this.uploadedSuccessfully();
-        //this.$modal.msgError(res.msg);
-        //this.$refs.imageUpload.handleRemove(fileObj.file);
-        //this.uploadedSuccessfully();
+        fileObj.onError()
       })
     },
     // 对象转成指定字符串分隔
@@ -222,6 +252,16 @@ export default {
       }
 
       return strs != '' ? strs.substring(0, strs.length - 1) : '';
+    },
+
+    listToTagObj(list) {      
+      let tempArry=[];
+      for (let i in list) {        
+        // console.log("listToString2 i",i);
+        tempArry.push(JSON.stringify( {url:list[i].url,name:list[i].name}));
+      }
+      console.log("listToString2",tempArry);
+      return tempArry;      
     }
   }
 };
@@ -232,6 +272,10 @@ export default {
   margin-bottom: 5px;
 }
 
+.el-upload-list__item {
+  transition: none !important;
+}
+
 .upload-file-list .el-upload-list__item {
   border: 1px solid #e4e7ed;
   line-height: 2;

src/views/core/drill/plan/index.vue

@@ -209,7 +209,7 @@
         <el-row>
           <el-col :span="12">
             <el-form-item label="上传文件" prop="fileList">
-              <K-file-upload ref="upload" v-model="form.fileList" @input="getKUploadFileList"/>
+              <K-file-upload ref="upload" :defaultValue="formFileListDefualtValue" v-model="form.fileList"/>
             </el-form-item>
           </el-col>
 <!--          <el-col :span="12">
@@ -292,6 +292,7 @@ export default {
         belongOrgId: null
 
       },
+      formFileListDefualtValue:[],
       // 表单参数
       form: {},
       // 表单校验
@@ -488,6 +489,7 @@ export default {
       const id = row.id || this.ids
       getPlan(id).then(response => {
         this.form = response.data;
+        this.formFileListDefualtValue=this.form.fileList;
         this.open = true;
         this.title = "修改预案演练计划";
       });

src/views/core/edu/plan/index.vue

@@ -230,7 +230,7 @@
         <el-row>
           <el-col :span="12">
             <el-form-item label="上传文件" prop="fileList">
-              <K-file-upload ref="upload" v-model="form.fileList" @input="getKUploadFileList"/>
+              <K-file-upload ref="upload" :defaultValue="formFileListDefualtValue" v-model="form.fileList"/>
             </el-form-item>
           </el-col>
           <el-col :span="12">
@@ -314,6 +314,7 @@ export default {
         checkSub:true
 
       },
+      formFileListDefualtValue:[],
       // 表单参数
       form: {},
       // 表单校验
@@ -510,6 +511,7 @@ export default {
       const id = row.id || this.ids
       getPlan(id).then(response => {
         this.form = response.data;
+        this.formFileListDefualtValue=this.form.fileList;
         this.open = true;
         this.title = "修改教育培训计划";
       });

src/views/core/materials/index.vue

@@ -183,7 +183,7 @@
           <el-input v-model="form.remark" placeholder="请输入备注" maxlength="200" show-word-limit/>
         </el-form-item>
         <el-form-item label="附件" prop="fileList">
-          <K-file-upload ref="upload" @input="getKUploadFileList" v-model="form.fileList"/>
+          <K-file-upload ref="upload" :defaultValue="formFileListDefualtValue" v-model="form.fileList"/>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -245,6 +245,7 @@ export default {
         children: "children",
         label: "name"
       },
+      formFileListDefualtValue:{},
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -434,6 +435,7 @@ export default {
       const id = row.id || this.ids
       getMaterials(id).then(response => {
         this.form = response.data;
+        this.formFileListDefualtValue=this.form.fileList;
         this.open = true;
         this.title = "修改学习资料";
       });