axios 使用 FormData 上传文件

Aeoleaf
AeoleafAuthor
·1 分钟·110 次阅读
#JavaScript#axios#前端

用 axios 以 FormData 方式上传文件的代码示例。

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

HTML

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

JavaScript

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。