我实现了一个文件上传，其中文件与一些数据一起传递到后端。文件和数据必须编码为表单数据。
我以两种方式实现了上传：
表单数据将文件作为二进制字符串进行合并
表单数据将文件作为普通字符串包含（链接到文件）
第一个选项适用于我，文件已成功上传，而在第二种情况下，将显示一条错误消息：
“提交的数据不是文件。请检查表单上的编码类型。
1.文件上传，音频文件作为二进制字符串（工作）
Form Data
audio: (binary)
title: Some Title
content: Some content
1. 创建将音频文件为二进制的表单数据的函数和表单 （ 工作 ）
export class CreateStory extends Component {
state = {
title: "",
content:"",
audio:""
};
static propTypes = {
addStory: PropTypes.func.isRequired
};
// Use Ref to clear uncontrolled file field
constructor(props) {
super(props);
this.inputRef = React.createRef();
}
onChange = (e) => {
if(e.target.name === 'audio') {
this.setState({
[e.target.name]: e.target.files[0]
}, () => console.log(this.state.audio))
} else {
this.setState({
[e.target.name]: e.target.value
}, () => console.log(this.state))
}
}
onSubmit = e => {
e.preventDefault();
let { title, content, audio} = this.state;
let formDataStory = new FormData(); // create form formData
formDataStory.append('audio', audio); // add audio to formData
formDataStory.append('title', title); // add title to formData
formDataStory.append('content', content); // add content to formData
console.log (this.formDataStory);
this.props.addStory(formDataStory) // call addStory function with formDataStory as Input to create new Story
.then(() => {
this.setState({
title: "", // clear title field after submission
content:"", // clear content field after submission
});
this.inputRef.current.value = ''; // clear file field after submission
})
};
BIG阳
相关分类