当我使用以下内容将文件发布到烧瓶服务器时使用原始 HTML,我可以从烧瓶请求全局访问文件:
<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 执行相同操作时,烧瓶请求全局为空:
<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.post 方法中删除标头 json,我会在我的烧瓶请求对象的表单键中获得一个字符串值的 csv 列表(文件是 .csv)。
如何获取通过 axios 发送的文件对象?
input
而不是 form
标记的 v-on:change="uploadFile"
?
将文件添加到 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 的示例应用程序。需要在 localhost 上运行的后端服务器来处理请求:
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);
}
}
});
https://codepen.io/pmarimuthu/pen/MqqaOE
如果您不想使用 FormData
对象(例如,您的 API 采用特定的内容类型签名,而 multipart/formdata
不是其中之一),那么您可以这样做:
uploadFile: function (event) {
const file = event.target.files[0]
axios.post('upload_file', file, {
headers: {
'Content-Type': file.type
}
})
}
PUT
上传文件,那么您可以使用 application/octet-stream
作为 Content-Type
。如果您使用 multipart/formdata
作为 Content-Type
上传到 Amazon S3 存储,它会将您的文件(图像、pdf、文档)转换为顶部添加 http 标头的文本文件。这会损坏上传文件的内容。因此,在使用 PUT
方法上传二进制文件时使用 application/octet-stream
。
这对我有用,我希望对某人有所帮助。
var frm = $('#frm');
let formData = new FormData(frm[0]);
axios.post('your-url', formData)
.then(res => {
console.log({res});
}).catch(err => {
console.error({err});
});
headers: { 'Content-Type': 'multipart/form-data' }
是它实际发送帖子的唯一方法。我可能做错了什么,但它正在工作,我不理会它,哈哈
Content-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
};
如何使用内存中的对象(如 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);
}
对我来说,错误是控制器中的实际参数名称......我花了一段时间才弄清楚,也许它会对某人有所帮助。我正在使用 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)
不定期副业成功案例分享
FormData
。根据 axios 的文档,File
和FormData
都被视为 Browser only,因此两种方式都可以同等看待(github.com/axios/axios#request-config)data:formData
一起使用formData.getHeaders()
计算的标头这是 axios 的一个已知问题;参见例如https://github.com/axios/axios/issues/789
File
与FormData
上的评论:如果我错了,请纠正我,但我相信File
只能在您上传单个文件且不包含任何其他有效负载数据的情况下使用请求(如在答案中),但如果您想提交数据集合(即具有多个字段的表单)以及文件(其中我怀疑在实际应用中更常见)。