前端使用FormData上传多个文件

FormData: 文档介绍https://developer.mozilla.org/zh-CN/docs/Web/API/FormData当接口需要文件格式的参数进行文件上传时,前端上传的文件需要使用 FormData

FormData主要作用:网络请求中处理用来异步的上传文件

例如:

前端使用FormData上传多个文件_第1张图片

前端调用方法如下:

// 创建一个新的 FormData 对象
const files = new FormData();
// fileList 是文件列表
// append方法是向 FormData 中添加新的属性值,FormData 对应的属性值存在也不会覆盖原值,而是新增一个值,如果属性不存在则新增一项属性值
fileList.forEach(file => {
  files.append("files", file);
})

axios({
  method: 'post',
  url: 'http://xxx.cn/import', // 接口地址
  data: files,
  headers: {
    'Content-Type': 'multipart/form-data'
  }
})
.then(res => console.log(res))
.catch(err => console.log(err))

 页面调用结果如下图

 前端使用FormData上传多个文件_第2张图片

你可能感兴趣的:(vue.js,前端,javascript)