时间戳

首页 > 解决方案 > 文件数据在发送到服务器时显示为空对象，但在通过 axios api 发送之前包含数据

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

问题描述

我正在尝试使用包含通过 axios api 的图像文件的反应提交表单。我的代码如下所示：

...
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)})
       
    }
    
  };
看起来在调度异步操作时，图像数据会丢失它的信息。我真的不知道为什么会这样。

标签： javascriptreactjsapifileaxios

解决方案

使用 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 
 }})

推荐阅读