Как добавить список в FormData? - PullRequest
Новая
       40

Как добавить список в FormData?

0 голосов
/ 19 марта 2020

Я хочу отправить изображение с дополнительными данными из React. js в Django бэкэнд. Когда я использовал FormData () для создания данных формы, он не смог отправить массив (потому что он преобразовал его в строку). Вот мой код: 

let formData = new FormData();
        formData.append('text', postForm.text);
        formData.append('image', postForm.image, postForm.image.name);
        formData.append('privacy', postForm.privacy);
        formData.append('custom_list', postForm.customList);

        props.createPost(formData);

, когда я использовал это, я получил эту ошибку: 

{"custom_list":["Incorrect type. Expected pk value, received str."]}

Итак, я попытался создать свой собственный объект для отправки в бэкэнд, но он может не обрабатывать данные изображения. Код: 

const formData = {
            text: postForm.text,
            image: postForm.image,
            privacy: postForm.privacy,
            custom_list: postForm.customList
        }

Это выдало следующую ошибку: 

{"image":["The submitted data was not a file. Check the encoding type on the form."]}

Можно ли как-нибудь отправить одновременно список и изображение?

Ответы [ 2 ]

1 голос
/ 19 марта 2020

Вы можете отправить список через FormData следующим образом: 

postForm.customList.forEach(item => {
 formData.append('custom_list', item);
});

Это даст вам массив custom_list на стороне сервера.

0 голосов
/ 19 марта 2020

Получить файл из вашего ввода, вы можете использовать ref 

const fileRef = useRef(null)

или 

const fileRef = React.createRef()

<input 
  type='file'
  label='Upload'
  accept='image/*' 
  ref={fileRef}
/>
const theFile = fileRef.files[0]

, тогда вы можете просто использовать эту функцию 

function getBase64String(file, cb) {
    let reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function () {
        cb(reader.result)
    };
    reader.onerror = function (error) {
        console.log('Error: ', error);
    };
}
let myImageStringToSendInJson = '';
getBase64String(theFile, (result) => {
     myImageStringToSendInJson = result;
})

получить строку base64, а затем просто отправить эту строку base64 в json Примечание: вам не нужно указывать любой другой заголовок в ax ios или извлекать, если вы отправляете base64

...