如何使用Axios从表单中发布文件

使用原始HTML当我发布一个文件到flask服务器使用以下我可以从flask请求全局访问文件:

<form id="uploadForm" action='upload_file' role="form" method="post" enctype=multipart/form-data>
<input type="file" id="file" name="file">
<input type=submit value=Upload>
</form>

瓶:

def post(self):
if 'file' in request.files:
....

当我尝试用Axios做同样的事情时，flask请求全局是空的:

<form id="uploadForm" enctype="multipart/form-data" v-on:change="uploadFile">
<input type="file" id="file" name="file">
</form>


uploadFile: function (event) {
const file = event.target.files[0]
axios.post('upload_file', file, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
}

如果我使用上面相同的uploadFile函数，但从axios中删除headers json。post方法我在我的flask请求对象的表单键中获得字符串值的csv列表(文件是.csv)。

如何通过axios获取文件对象?

500906 次浏览
小开
最佳答案

将文件添加到formData对象中，并将Content-Type头文件设置为multipart/form-data。

var formData = new FormData();
var imagefile = document.querySelector('#file');
formData.append("image", imagefile.files[0]);
axios.post('upload_file', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
小开

使用Vue的示例应用程序。需要一个运行在本地主机上的后端服务器来处理请求:

var app = new Vue({
el: "#app",
data: {
file: ''
},
methods: {
submitFile() {
let formData = new FormData();
formData.append('file', this.file);
console.log('>> formData >> ', formData);


// You should have a server side REST API
axios.post('http://localhost:8080/restapi/fileupload',
formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
}
).then(function () {
console.log('SUCCESS!!');
})
.catch(function () {
console.log('FAILURE!!');
});
},
handleFileUpload() {
this.file = this.$refs.file.files[0];
console.log('>>>> 1st element in files array >>>> ', this.file);
}
}
});

< a href = " https://codepen。io / pmarimuthu /钢笔/ MqqaOE noreferrer“rel = > https://codepen.io/pmarimuthu/pen/MqqaOE < / >

小开

这对我有用，我希望能对别人有所帮助。

var frm = $('#frm');
let formData = new FormData(frm[0]);
axios.post('your-url', formData)
.then(res => {
console.log({res});
}).catch(err => {
console.error({err});
});
小开

如何在内存中使用对象发布文件(如JSON对象):

import axios from 'axios';
import * as FormData  from 'form-data'


async function sendData(jsonData){
// const payload = JSON.stringify({ hello: 'world'});
const payload = JSON.stringify(jsonData);
const bufferObject = Buffer.from(payload, 'utf-8');
const file = new FormData();


file.append('upload_file', bufferObject, "b.json");


const response = await axios.post(
lovelyURL,
file,
headers: file.getHeaders()
).toPromise();




console.log(response?.data);
}
小开

如果你不想使用FormData对象(例如，你的API接受特定的内容类型签名，而multipart/formdata不是其中之一)，那么你可以这样做:

uploadFile: function (event) {
const file = event.target.files[0]
axios.post('upload_file', file, {
headers: {
'Content-Type': file.type
}
})
}
小开

分享我的React &HTML输入

定义输入字段

<input type="file" onChange={onChange} accept ="image/*"/>

定义onChange监听器

const onChange = (e) => {
let url = "https://<server-url>/api/upload";
let file = e.target.files[0];
uploadFile(url, file);
};


const uploadFile = (url, file) => {
let formData = new FormData();
formData.append("file", file);
axios.post(url, formData, {
headers: {
"Content-Type": "multipart/form-data",
},
}).then((response) => {
fnSuccess(response);
}).catch((error) => {
fnFail(error);
});
};
const fnSuccess = (response) => {
//Add success handling
};


const fnFail = (error) => {
//Add failed handling
};
小开

对我来说，错误是我控制器中的实际参数名称……我花了好长时间才想明白，也许能帮到别人。我使用Next.js / .Net 6

客户:

export const test = async (event: any) => {
const token = useAuthStore.getState().token;
console.log(event + 'the event')
if (token) {
const formData = new FormData();
formData.append("img", event);
const res = await axios.post(baseUrl + '/products/uploadproductimage', formData, {
headers: {
'Authorization': `bearer ${token}`
}
})
return res
}
return null
}

服务器:

 [HttpPost("uploadproductimage")]
public async Task<ActionResult> UploadProductImage([FromForm] IFormFile image)
{
return Ok();
}

这里出现错误，因为服务器正在等待参数“image”;而不是"img:

formData.append("img", event);


public async Task<ActionResult> UploadProductImage([FromForm] IFormFile image)
小开

这是我的方式:

var formData = new FormData(formElement);
// formData.append("image", imgFile.files[0]);
const res = await axios.post(
"link-handle",
formData,
{
headers: {
"Content-Type": "multipart/form-data",
},
}
);
小开

Axios版本0.25.0 >到0.27.2存在一个问题，其中FormData对象在PUT请求中不能正确处理，如果你有appended多个字段，但一个字段包含一个文件是可以的，POST工作正常。

此外，Axios 0.25.0+会自动设置正确的标头，因此不需要指定Content-Type。


提交答案