🎂 Happy Birthday! 今天是我的生日 🎉 去留言祝福
🕯️ 点击许个愿吧
✨ 愿望已许下
← Blog

axios 使用 FormData 上传文件

axios 使用 FormData 上传文件

前端使用 axios 以表单方式上传文件:

HTML

<input id="name" name="name"/>
<input id="age" name="age"/>
<input id="file" type="file" name="file" multiple>

JavaScript

let forms = new FormData()

forms.append('name', document.getElementById('name').value)
forms.append('age', document.getElementById('age').value)

let files = document.getElementById('file').files

// 上传多个文件
Array.from(files).forEach(item => {
    forms.append('file', item)
})

const options = {
  method: 'POST',
  data: forms,
  url: '/api/upload',
};
axios(options);

注意:使用 FormData 时不需要手动设置 Content-Type,axios 会自动设置为 multipart/form-data 并生成正确的 boundary。