我试图将reactJS前端上的用户输入的各种数据类型发送到Django python后端,并得到一个错误,其中文本字符串发送,但图像文件不发送。
这里是我发送图像和说明的地方
handleSubmit = async () => {
try {
const formData = new FormData();
console.log('Image: ', this.props.fileInput);
console.log('Image type: ', typeof this.props.fileInput);
console.log('Image is a File: ', this.props.fileInput instanceof File);
formData.append('file', this.props.fileInput);
// formData.append('file', this.props.file);
formData.append('caption', this.state.caption);
for (let pair of formData.entries()) {
console.log(pair[0] + ', ' + pair[1]);
}
const response = await axios.post(API_URL, formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
});
if (response.status === 200) {
console.log('Image uploaded successfully');
}
} catch (error) {
console.error(error);
}
}
在字幕部分和图像部分
updateImage = async (imageId, caption) => {
try {
const formData = new FormData();
console.log('File:', this.state.file);
console.log('Caption:', caption);
formData.append('file', this.state.file);
formData.append('caption', caption);
for (let pair of formData.entries()) {
console.log(pair[0] + ', ' + pair[1]);
}
const response = await axios.post(API_URL, formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
});
if (response.status === 200) {
console.log('Image processed successfully');
const currentState = this.state;
const newState = {...currentState};
newState.elements[imageId].URL = response.data.image_url;
this.setState(newState);
return response.data.image_url;
}
} catch (error) {
console.error(error);
}
}
...
...
return(
...
{this.state.newElement &&
<Caption
file={this.state.file}
imageId={this.state.newElement.id}
updateCaption={this.updateImage}
/>
}
</div>
);
}
}
export default Image;
请让我知道,如果有什么明显的错误或你会试图解决这个问题,我感谢任何指导或帮助,因为这是我试图解决的最后一个问题!
1条答案
按热度按时间9bfwbjaz1#
您可以将文件转换为base64字符串。然后将请求作为json对象发送。在django应用程序中,将base64字符串解析为所需的文件并使用它。通过使用base64字符串,我节省了大量的时间和头痛。
请记住,base64会使您的文件稍大。