springboot+elmentUi+vue实现多文件上传

qq_51318736

已于 2023-03-15 22:22:28 修改

阅读量565

点赞数

文章标签： vue.js 前端 javascript

于 2023-03-15 22:18:23 首次发布

本文链接：https://blog.csdn.net/qq_51318736/article/details/129570627

版权

该文章展示了如何在Vue项目中使用ElementUi组件库的上传组件实现多文件选择和手动上传功能。通过监听onChange事件收集文件信息，存储在数组中，然后在用户触发按钮时，比较文件数量，如果无变化则创建formData对象并将所有文件添加进去，最后调用异步接口一次性发送所有文件到后端。

摘要由CSDN通过智能技术生成

vue组件引入ElmentUi

<el-upload
（其他配置可以看官网）
  action=""(默认不写)
  :multiple="true"（多选）
  :on-change="handleChangeFile"（文件添加，上传成功，上传失败都会触发）
  :auto-upload="false"（手动上传）
  >
  <el-button size="small" type="primary">文件上传</el-button>（选取文件）
</el-upload>
<el-button size="small" type="primary" @click="filsAdd">新增</el-button>（发送异步请求按钮
注意：要实现只发送一个异步请求实现多文件传递传入后台）
<br/>
<br/>

js(基于vue)

data(){
return {
//记录文件上传的个数(
意思：用来实现比较文件个数
作用：实现只发送一个异步请求传递实现多文件传入后台)
filesLength:0，
 //存储上传的文件数组
fileListG:[]
}
}
methods: {
  /**  添加附件管理界面的钩子函数 **/
  handleChangeFile(file,files) {
  //记录文件个数
    this.filesLength=files.length
    //存储上传的文件数组
    this.fileListG=files;
  },
  //按钮点击方法触发异步数据请求
  filsAdd(){
  //比较文件数相同只发送一次异步请求
    if(this.fileListG.length===this.filesLength) {
    //文件发送使用formData
      let formData=new FormData();
      //遍历this.fileListG存到formData
      this.fileListG.forEach(item=>{
      //文件上传的信息存储在file.raw中（你自己打印即可看到）
        formData.append("file",item.raw)
      })
      //后端接口请求
    addAttachment(formData).then(res=>{
    //响应成功数据（基于promise）成功回调
      console.log(res,"接口成功")
      //实现消息提示
      this.$message("添加成功");
    }).catch(rso=>{
     //失败回调
      console.log(rso,"接口失败")
      throw "上传失败"
    })
    }
  },