文件数据在发送到服务器时显示空对象，但在通过axios api发送之前包含数据

Question

我正试图通过axios api使用react提交一个包含图像文件的表单。我的代码如下：

...
const [formState, setFormState] = useState({name:"", price:"", availability:true, sku:"", category:"", image:"", availability: "", descriptionLong:'', descriptionShort:'' });
const handleChange=(e)=>{
const name = e.target.name;
const value = e.target.value;
setFormState({...formState, [name]:value});
}
const handleFile=(e)=>{
const name = e.target.name;
const value = e.target.files[0];
setFormState({...formState, [name]:value});
}
const handleSubmit =(e)=>{
e.preventDefault();
console.log(formState);
dispatch(createProduct(formState)); 
...
<div className="form-group">
<label htmlFor="profile-phone">Product Image</label>
<input
type="file"
onChange={handleFile}
name="image"
/>
</div>

当我提交表格时，我会得到formState的安慰：

{
...
image: File {name: "DSC_0089.JPG", lastModified: 1537047576000, lastModifiedDate: Sat Sep 15 2018 22:39:36 GMT+0100 (West Africa Standard Time), webkitRelativePath: "", size: 678386, …}
price: "4000000"
sku: "sku001"
userId: 3
}

但当我检查我的网络时，我的请求有效载荷显示如下：

{
...
image: {}
price: "4000000"
sku: "sku001"
userId: 3
}

我的异步操作看起来是这样的：

export const apiCall= async (url,data,dispatch, type="get", token=undefined)=>{
...
try{
if(type === "get"){
response = await axios(requestUrl,header(token));
}
else {
response= await axios.post(requestUrl, data, header(token));
}
return response;
}
catch(error){

}
}
export const createProduct =(data) =>{
return function(dispatch, getState){
let requestUrl = 'product/new';
const {token, userId}= getState(state=>state).authReducer;
data.userId =userId;  
return apiCall(requestUrl, data, dispatch,'post', token).then((response)=>{
try{
if(response.status === 200){
console.log(response.data);
toast.success(response.data.message)
return;
}

else{

}
}
catch(error){
console.log(error);
}
}
,(error)=>{console.log(error)})

}

};

看起来，在调度异步操作时，图像数据会丢失它的信息。我真的不知道为什么会发生这种事。

Answer 1

使用HTML5，您可以使用FormData()构建一组键/值对，表示要发送的表单字段及其值。

const handleSubmit =(e)=>{
e.preventDefault();
let formData = new FormData();
Object.keys(formState)map((k) => {
formData.set(k, formState[k])
})
dispatch(createProduct(formData));
}

此外，标题必须是multipart/form-data的内容类型

axios.post(url, formData, {
headers: {
'content-type': 'multipart/form-data' // do not forget this 
}})