vue+elementui批量上传下载注意事项

小半 • 2023年8月14日上午9:49 • 前端开发 • 阅读 298

批量手动上传文件，和表单数据一起提交

1.在el-upload组件关键的钩子，其它省略

　　multiple

　　:auto-upload = “false”

　　:file-list = “fileList”

　　:on-change = “selectFile” （里面是把上传的fileList传给自定义的 this.fileList）

2.点击上传，将多个文件和表单数据一起上传

　　a.定义FormData，将表单数据和文件填充到FormData里面

　　b.自定义请求头部，Content-type：‘multipart/form-data’

let formData = new FormData()
for(let key in data){
    if(data[key]){
      formData.append(key,data[key])
    } 
}

this.fileList.forEach((element,i) =>{
  formData.append('fileList',element.raw)
})

let rs = await axios({
  method:'post',
  url: cfg.uploadURL + '/sp/addSp',
  data: formData,
  headers:{
    'Content-type':'multipart/form-data'
  } 
})

表格中上传文件中，组件钩子函数自带参数

<el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="（file,fileList）=>{
     return beforeRemove（file,fileList,scope.$index）
  }"
  multiple
  :limit="3"
  :on-exceed="handleExceed"
  :file-list="fileList">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

beforeRemove（file,fileList,index）{
    console.log(index)
}

批量下载（后台不返回压缩包，前端就一个个下载了）

download(val){
  let vals = val.split(',') //后台返回的文件标识符数组
  vals.forEach((element) =>{
    const iframe = document.createElement("iframe");
    iframe.style.display = "none";
    iframe.style.height = 0;
    iframe.src = cfg.baseURL+'下载路径'+element; 
    document.body.appendChild(iframe); 
    setTimeout(()=>{
      iframe.remove();
    }, 1000)
  })
}

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/159677.html

vue+elementui批量上传下载注意事项

相关推荐

分享到: