一、批量上傳文件

思路

創(chuàng)建一個數(shù)組，把需要上傳的文件放到這個數(shù)組里面，最后將文件發(fā)送給后臺

代碼

html

<Form ref="formHandle" :model="formObj" inline :label-width="90">        
    <FormItem class="FormItemWidth" style="margin-bottom:10px" label="上傳附件：" prop="code">
       <Upload                      
        :show-upload-list="false"            
        :before-upload="handleBeforeUpload"
        type="drag"
        multiple
        action=""
        class="uploadFile">
        <span class="choseFile">上傳</span>
      </Upload>
    </FormItem>
    <p class="file-tip">支持.xlsx .xls .doc .docx .png .jpg .pdf</p>
    <div class="file-list-box" v-show="formObj.fileArr.length > 0">
      <ul class="file-list">
        <li class="file-item" v-for="(list,index) in formObj.fileArr" :key="index">
          <span >文件名: {{ list.name }}</span>
          <Icon class="file-delete" type="ios-close" size="15" color="red" @click="removeFile(index)"></Icon>
        </li>
      </ul>
    </div>  
</Form>

數(shù)據(jù)

formObj: {        
    fileArr: [],
},
fileMaxTip: false,

方法

// 文件上傳
handleBeforeUpload (file) {
  // 文件類型校驗
  let type = (file.name.substr(file.name.lastIndexOf("."))).toLowerCase(); // .jpg
  let imgType = type.split('.')[1] // jpg
  let imgFileTypeArr = ['jpg','jpeg','png','xlsx','xls','doc','docx','pdf']
  let checkType = imgFileTypeArr.some((item) => {
    return item === imgType
  })
  if (!checkType) {
    this.$Message.info('只支持.xlsx .xls .doc .docx .png .jpg .pdf格式');
    return false
  }
  // 文件大小校驗
  const checkMax = file.size < 5242880;
  if(!checkMax){
    this.$Message.info('單個文件不能大于5MB');
    return false;
  }
  // 文件名稱重復(fù)校驗
  let nameArr = this.formObj.fileArr.map((item) => {
    return item.name
  })
  let isRepeat = nameArr.indexOf(file.name)
  if (isRepeat !== -1) {
    this.$Message.info('文件名稱不能重復(fù)');
    return false;
  } 

  if (this.formObj.fileArr.length >= 10) {    
    this.fileMaxTip = true    
    return false;
  }
  
  this.formObj.fileArr.push(file);      
  return false;         
}, 
removeFile (index) {
  this.formObj.fileArr.splice(index, 1);
},

接口

// 文件上傳
setFileList () {       
  let formData = new FormData();    
  for (let i = 0; i < this.formObj.fileArr.length; i++) {
      formData.append("file", this.formObj.fileArr[i]); // 文件對象
  }
  // 其他參數(shù)
  // formData.append("type", 1);
  api.feedbackManage.feedbackUpload(formData).then(res => {
    if (res.status === 200) {
      this.formObj.fileArr = []           
    }
  }).catch(() => {
    
  });
},

最多上傳10文件校驗提示

watch: {
    // 如果有彈窗，回顯，注意清空文件數(shù)組
    fileMaxTip (newVal) {
      if (newVal) {
        this.$Message.info('每次最多只能上傳10個文件');
        setTimeout(() => {
          this.fileMaxTip = false
        }, 2000)
      }
    }    
},

二、如果有回顯文件及刪除

思路

將需要刪除的文件放進(jìn)一個數(shù)組，執(zhí)行操作時調(diào)去后臺批量刪除的接口

代碼

僅補(bǔ)充需要的代碼，其余功能同上

html

<div class="file-list-box" v-show="formObj.fileArr.length > 0 || backFileList.length > 0">
    <ul class="file-list">
      <!-- 回顯 -->
      <li class="file-item" v-for="(file,index) in backFileList" :key="index">
        <span >文件名: {{ file.fileName }}</span>
        <Icon class="file-delete" type="ios-close" size="15" color="red" @click="deleteFile(index)"></Icon>
      </li>
      <!-- 上傳 -->
      <li class="file-item" v-for="(list,index) in formObj.fileArr" :key="index">
        <span >文件名: {{ list.name }}</span>
        <Icon class="file-delete" type="ios-close" size="15" color="red" @click="removeFile(index)"></Icon>
      </li>
    </ul>
</div>

數(shù)據(jù)

backFileList: [], // 回顯文件列表   
deleteFileArr: [],  

方法

// 回顯文件
// 當(dāng)調(diào)去詳情接口后賦值，并根據(jù)具體字段顯示在HTML代碼中
this.backFileList = res.data[0].fileArchiveList || []   
                           
// 刪除文件
deleteFile (index) {
    let deleteFile = this.backFileList.splice(index, 1);
    this.deleteFileArr.push(deleteFile[0])        
},

接口

deleteFileApi () {
    let ids = ''
    let tempArr = []
    if (this.deleteFileArr.length > 0) {
      tempArr = this.deleteFileArr.map((item) => { return item.fileId })
      ids = tempArr.join(',')
    }else {
      return false
    }        
    const params = { ids }
    let postData = this.$qs.stringify(params) 
    api.feedbackManage.feedbackDelete(postData).then(res => {
      if (res.status === 200) {
        this.deleteFileArr = []            
      }
    }).catch(() => {
      this.deleteFileArr = []  
      this.$Message.error('刪除文件失敗');     
    })
}

樣式

.file-list-box {
  border: 1px solid #dddddd;
  border-radius: 4px;
  margin: 0 10px 10px;
  padding: 10px;
  .file-item {
    span, .file-delete {
      display: inline-block;
      vertical-align: middle;
    }
    .file-delete {
      cursor: pointer;
    }
  }
}
.file-tip {  
  margin: 5px 0;
}

注意事項

文件上傳一定要做防抖，防止用戶多次點擊，否則開銷非常大。

防抖

用戶在3秒鐘內(nèi)點擊只生效一次，時間可調(diào)節(jié)。
多添加StopBtn變量，可在多個事件上添加防抖

// 防抖 3秒鐘
stopTime: 3000,
fileStopBtn : false, // 文件

if (this.fileStopBtn === false) {
  this.fileStopBtn = true
  setTimeout(() => {
    this.fileStopBtn = false
  }, this.stopTime)
  // 接口請求
}

網(wǎng)站導(dǎo)航

網(wǎng)站導(dǎo)航