用vue,axios,element-ui写一个批量上传照片的功能,

要求批量上传照片到后台接口,接口参数是[{photo:照片1,album:相册id},{photo:照片2,album:相册id}]

使用el-upload控件上传就可以了,参数可以前端封装。

使用el-upload提供的手动上传功能,将你要上传的文件封装在一个数组里面,点击上传的时候把数组传到后台就可以了。

注意添加multiple属性和limit属性并将autoUpload属性改为false,绑定好fileList属性,上传之前对fileList做一个封装:

// 该方法绑定到上传按钮
handleUploadList() {
  // 封装手动上传所需的参数
  let formData = new FormData()
  this.fileList.forEach(item => {
    formData.append('photo',item)
  })
  // 调用上传接口
  uploadFileList(formData).then(res => {
    // to do something
  })
}

 

el-upload手动上传的那个示例,在submitUpload里写axios上传

https://element-plus.gitee.io/#/zh-CN/component/upload#methods

您好,我是有问必答小助手,您的问题已经有小伙伴解答了,您看下是否解决,可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案,可以点击【采纳】按钮,给回答的小伙伴一些鼓励哦~~

ps:问答VIP仅需29元,即可享受5次/月 有问必答服务,了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632