在有一些业务场景中,需要在react组件中向服务器上传文件,以下是核心的代码,组件的定义省略了,只写了组件内的函数,django的url和表单啥的可以自定义。
React 代码:
uploadChage(e) {
this.setState({
file: e.target.files[0],
})
}
async onUploadFileClick() {
let url = 'xxxxxxxxxxx';
let formData = new FormData();
formData.append('file', this.state.file);
let resp = await fetch(url, {
method: 'post',
body: formData
});
let data = await resp.json();
if (data.status === 0) {
alert(data.result.message)
} else {
alert(data.message);
}
}
renderUploadTicketFile() {
return (
<>
<input type="file" onChange={this.uploadChage}></input>
<button onClick={this.onUploadFileClick}>{this.state.currentState}</button>
</>
)
}
Django View代码:
def upload_file(request):
form = FileForm(request.POST, request.FILES)
if not form.is_valid():
return JsonResponseError(errors=form.errors)
handle_uploaded_file(request.FILES['file'])
return JsonResponseSuccess({ 'message': 'Import Successfully.' })