一、批量上传文件

思路

创建一个数组，把需要上传的文件放到这个数组里面，最后将文件发送给后台

代码

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>

数据

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;
  }
  // 文件名称重复校验
  let nameArr = this.formObj.fileArr.map((item) => {
    return item.name
  })
  let isRepeat = nameArr.indexOf(file.name)
  if (isRepeat !== -1) {
    this.$Message.info('文件名称不能重复');
    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]); // 文件对象
  }
  // 其他参数
  // formData.append("type", 1);
  api.feedbackManage.feedbackUpload(formData).then(res => {
    if (res.status === 200) {
      this.formObj.fileArr = []           
    }
  }).catch(() => {
    
  });
},

最多上传10文件校验提示

watch: {
    // 如果有弹窗，回显，注意清空文件数组
    fileMaxTip (newVal) {
      if (newVal) {
        this.$Message.info('每次最多只能上传10个文件');
        setTimeout(() => {
          this.fileMaxTip = false
        }, 2000)
      }
    }    
},

二、如果有回显文件及删除

思路

将需要删除的文件放进一个数组，执行操作时调去后台批量删除的接口

代码

仅补充需要的代码，其余功能同上

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>

数据

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

方法

// 回显文件
// 当调去详情接口后赋值，并根据具体字段显示在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秒钟内点击只生效一次，时间可调节。
多添加StopBtn变量，可在多个事件上添加防抖

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

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

网站导航

网站导航