【Vue】vue+axios+FormData上传多个文件

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

html

一般网页上传文件大家都会用到这个标签

<input type="file" id="file_input"/>

我们可以通过这个标签选取文件，使用js进行文件上传等操作，同时，该标签同时可以选取多个文件：

<input id="upload_file" type="file" multiple @change="v_upload_files"/>

但有些时候，进行其他操作的时候，用户需要获得文件夹路径，那么这种写法可以用该标签选取文件夹

<input type="file" id="file_input" webkitdirectory directory />

使用ant-design的upload组件时获得文件夹路径的方式：

<a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" directory>
    <a-button> <a-icon type="upload" /> Upload Directory </a-button>
</a-upload>

 注意input file 是不支持v-model的，因为v-model是双向数据绑定，而input file里面的文件只能通过点击选取来进行变更。

js

v_upload_files(e) {
  let files = e.target.files
  let formData = new FormData()
  // formData重复的往一个值添加数据并不会被覆盖掉，可以全部接收到，可以通过formData.getAll('files')来查看所有插入的数据
  for (let i = 0;i < files.length;i++) {
    formData.append('files', files[i])
  }
  let url = '/files/uploadfiles'
  let headers = {
    'Content-Type': 'multipart/form-data'
  }
  axios.post(url, formData, {headers: headers})
}

需要注意的是请求头需要设置为'Content-Type': 'multipart/form-data'

参照：https://juejin.cn/post/6844903934469865485

参照：https://blog.csdn.net/shi_6_tians/article/details/103750752

以上是 【Vue】vue+axios+FormData上传多个文件 的全部内容， 来源链接： utcz.com/z/376814.html

回到顶部