我正在使用 react.js 和 django 作为后端，我想使用 axios lib 将图像从 react.js 表单上传到 django

Question

这是我的句柄提交函数 我尝试过这种方式，但我认为缺少一些东西

">

"

handle = (event) => {
event.preventDefault();    
const name = event.target.name.value;
const barcode = event.target.barcode.value;
const category = event.target.category.value;
const description = event.target.description.value;
const image=new FormData();
image.append('image',event.target.image.value);
axios.post('http://127.0.0.1:8000/admindashboard/products-create/', {
name: name,
Barcode: barcode,
category: category,
description: description,
image
}).then(result=>{console.log(result);
});
}

''' 这是我的形式 '''

<Form onSubmit={(event) => this.handle(
event
)}
class="ui form">
<Form.Field>
<input placeholder='product Name' name='name'/>
</Form.Field>
<Form.Field>
<TextArea placeholder='Description' name='description' />
</Form.Field>
<Form.Field>
<input placeholder='Barcode' name='barcode'/>
</Form.Field>
<Form.Field name='category' control='select'>
{this.state.categories.map((cat)=>(<option name='category' value={cat.id}>{cat.name}
</option>))}
</Form.Field>
<Form.Field>
<input id="id_image"  type="file"  name="image"/>
</Form.Field>
<Button type='submit'>Submit</Button>
</Form>

">

请帮我找出问题所在

Answer 1

你应该这样做：

event.preventDefault();
const data = new FormData() 
data.append('name', event.target.name.value)
data.append('barcode', event.target.barcode.value)
data.append('category', event.target.category.value)
data.append('description', event.target.description.value)
data.append('image',event.target.files[0]);
axios.post('http://127.0.0.1:8000/admindashboard/products-create/',data).then(result=>{console.log(result)});