Данные файла показывают пустой объект при отправке на сервер, но содержат данные перед отправкой через ax ios api - PullRequest
Новая
       91

Данные файла показывают пустой объект при отправке на сервер, но содержат данные перед отправкой через ax ios api

0 голосов
/ 08 мая 2020

Я пытаюсь отправить форму с помощью response, содержащего файл изображения через ax ios 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)})
       
    }
    
  };
Похоже, что при отправке асинхронного действия данные изображения теряют информацию. Я действительно не могу сказать, почему это происходит.

1 Ответ

0 голосов
/ 08 мая 2020

С 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 
 }})
...