文件上传可分多次

src/views/data/UploadInfor.vue

@@ -121,28 +121,31 @@
       </div>
     </div>
 
-    <div class="dataName" style="margin-top: 2%;">
+    <div class="dataName" style="margin-top: 2%">
       <span>反馈设置</span>
       <select class="selectStyle" v-model="isFeedBack" autocomplete="off">
         <option value="0">不需要反馈</option>
         <option value="1">需要反馈</option>
       </select>
       <input
-              type="date"
-              :min="localDay"
-              class="inputStyle"
-              v-model="feedBackTime"
-              v-show="isFeedBack === '1'"
-              @change="feedBackTimeChange"
+        type="date"
+        :min="localDay"
+        class="inputStyle"
+        v-model="feedBackTime"
+        v-show="isFeedBack === '1'"
+        @change="feedBackTimeChange"
       />
     </div>
     <div class="uploadFile">
-      <p>附件</p>
+      <p class="title">附件</p>
       <label for="fileInput" @change="getFileInfo($event)"
         >导入<input type="file" name="fileName" id="fileInput" multiple
       /></label>
       <div class="fileDes">
-        <p v-for="(item, index) in fileDes" :key="index">{{ item }}</p>
+        <p v-for="(item, index) in fileDes" :key="index"
+        >{{ item }}
+          <span class="deletFile" @click="deletFile(index)">×</span>
+        </p>
       </div>
     </div>
     <button @click="submit" class="submitBtn">提交</button>
@@ -181,7 +184,7 @@ export default {
       inforName: "",
       inforDes: "",
       materialTime: "",
-      feedBackTime:'',
+      feedBackTime: "",
       scope: "1", //1为共通 ， 0为部分
       checkedBoxList: [], // 多选框选中的值
       addByCustomize: "",
@@ -196,13 +199,13 @@ export default {
       areaList: [], // 按区域添加
       groupList: [], // 按小组添加
       localMonth: "",
-      localDay:'',
+      localDay: "",
       tableData: [], // 表格显示的数据
       allDlr: [], // 所有经销商数据
       idList: [],
       tipModalFlag: false,
       tipModalText: "",
-      isFeedBack:'0'
+      isFeedBack: "0",
     };
   },
   computed: {
@@ -215,7 +218,7 @@ export default {
     // 检查名字是否重复 失去焦点判断
     checkName: function () {
       let include = this.allDataNameList.indexOf(this.inforName);
-      console.log(this.allDataNameList, 'all');
+      console.log(this.allDataNameList, "all");
       console.log(include);
       if (!this.inforName) {
         this.tipText = "资料名不能为空";
@@ -322,7 +325,7 @@ export default {
     // 关闭提示框
     closeTipModal: function () {
       this.tipModalFlag = false;
-      this.$router.push({path:'/uploadRecord'});
+      this.$router.push({ path: "/uploadRecord" });
     },
     // 获取某一页面的数据，展示在表格
     changePage: function (page) {
@@ -355,8 +358,8 @@ export default {
     },
     // 点击提交，检查名字是否重复，获取数据
     submit: function () {
-      if(this.isFeedBack === '0'){
-        this.feedBackTime = '';
+      if (this.isFeedBack === "0") {
+        this.feedBackTime = "";
       }
       this.checkName();
       if (!this.tipFlag) {
@@ -368,8 +371,8 @@ export default {
           alert("请选择素材时间");
           return;
         }
-        if(this.isFeedBack === '1'){
-          if(!this.feedBackTime){
+        if (this.isFeedBack === "1") {
+          if (!this.feedBackTime) {
             alert("请选择截止日期");
             return;
           }
@@ -382,14 +385,21 @@ export default {
         this.submitRequest();
       }
     },
-    // 获取文件名
+    // 获取文件，文件名
     getFileInfo: function (event) {
-      this.file = event.target.files;
-      console.log(this.file);
-      this.fileDes = [];
-      this.file.forEach((item) => {
+      let file = event.target.files;
+      file.forEach((item) => {
+        this.file.push(item);
         this.fileDes.push(item.name);
       });
+      console.log(this.file, "this.file");
+    },
+    // 删除文件
+    deletFile: function(i) {
+      console.log(i);
+      this.file.splice(i, 1);
+      this.fileDes.splice(i, 1);
+      console.log(this.file);
     },
     // 获取当前的月份
     getLocalMonth: function () {
@@ -403,8 +413,8 @@ export default {
         month = month + "";
       }
       this.localMonth = year + "-" + month;
-      this.localDay =  year + "-" + month + "-" + day;
-      console.log(this.localDay)
+      this.localDay = year + "-" + month + "-" + day;
+      console.log(this.localDay);
     },
     // 提交接口
     submitRequest: function () {
@@ -505,12 +515,12 @@ export default {
               // 自定义添加  提示
               let include = this.dlrList.indexOf(this.addByCustomize);
               if (include < 0 && addBySelfFlag) {
-                alert('没有找到该经销商');
-                return
+                alert("没有找到该经销商");
+                return;
               }
               if (this.sum === nowSum && addBySelfFlag) {
                 alert("该经销商已在列表中，不用重复添加");
-                return
+                return;
               }
             }
           } else {
@@ -576,8 +586,7 @@ export default {
     this.selectGroupList();
     this.getAreaList();
   },
-  beforeCreate() {
-  }
+  beforeCreate() {},
 };
 </script>
 
@@ -751,9 +760,8 @@ export default {
   .uploadFile {
     display: flex;
     margin-top: 35px;
-    height: 30px;
-    align-items: center;
-    p {
+    min-height: 100px;
+    .title{
       margin-right: 20px;
       height: 20px;
       line-height: 20px;
@@ -761,10 +769,23 @@ export default {
     .fileDes {
       margin-left: 20px;
       width: 500px;
-      overflow: hidden;
       overflow: hidden; /* 超出一行文字自动隐藏 */
       text-overflow: ellipsis; /* 文字隐藏后添加省略号 */
       white-space: nowrap; /* 强制不换行 */
+      p {
+        height: 30px;
+        line-height: 30px;
+        .deletFile {
+          font-size: 20px;
+          margin-left: 20px;
+          height: 30px;
+          line-height: 30px;
+          // color: #0056a0;
+          &:hover {
+            cursor: pointer;
+          }
+        }
+      }
     }
     label {
       height: 30px;