Как загрузить файл вместе с текстом с помощью fetch в реагировать родной?

Question

Я пытаюсь загрузить файл на сервер, используя react-native-document-picker.Проблема, с которой я сталкиваюсь, заключается в том, что я не знаю, как загрузить файл вместе с текстом. В моем приложении есть раздел для загрузки файла, также есть область для написания некоторого текста. Затем он будет загружен на сервер.Так что я сделал следующее. Но я получаю эту ошибку после отправки на сервер

unhandled promise rejection unsupported BodyInit type

обновленная часть кода

 filepick = () => {
    DocumentPicker.show({
        filetype: [DocumentPickerUtil.images()],
    }, (error, res) => {
        if (error == null) {
            console.log(
                res.uri,
                res.type, // mime type
                res.fileName,
                res.fileSize
            );
            this.setState({
                img_uri: res.uri,
                img_type: res.type,
                img_name: res.fileName

            })
        } else {
            Alert.alert('Message', 'File uploaded failed');
        }
    });
};


 onPressSubmit() {

        const data = new FormData();
        data.append('file', { uri: this.state.img_uri, type: 
       this.state.img_type, name: this.state.img_name })
        data.append('comment', { text: this.state.text });
        AsyncStorage.getItem("userdetail").then(value => {
            fetch(GLOBAL.ASSN_URL +`${this.props.id}`, {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'multipart/form-data',
                    'Authorization': value
                },
                body: data
            }).then((response) => {
                return response.text()
            }).then((responseJson) => {
                var result = responseJson;

                console.log(result);

            });
        })
    }

Функция filepick() вызывается после выбора файла на вашем устройстве. Пожалуйста, помогите мне найти решение. Как я могу загрузить это на сервер и как отправить текст без его строкового форматирования?

Answer 1

body: ({
    file: this.state.file,
    comment: this.state.text
})

Почему вы заключаете тело в скобки?Удаление их может исправить это.

Также обратите внимание, https://github.com/facebook/react-native/issues/6025, возможно, вы захотите структурировать объект body, поскольку ваш тип контента не application/json

body: JSON.stringify({
        file: this.state.file,
        comment: this.state.text
})

Редактировать

Из комментариев мы теперь знаем следующее

1) Вы загружаете файл отдельно.

2) Ответ на загрузку содержит информацию о файле

3) Вы сохраняете объект в отдельном вызове сервера

4) Вам необходимо сохранить файл с этим объектом

В приведенном ниже решении предполагается, что вы имеете полный контроль над сервероми вы также обрабатываете конечную точку загрузки файла.Вот решение

В принципе вам не нужно снова загружать весь файл с вашей сущностью, поскольку он уже загружен на сервер, все, что вам нужно сделать, это сохранить ссылку на файл с сущностью.Это два способа сохранить ссылку

1) Просто сохраните fileName или fileUrl в вашей таблице сущностей, а затем сохраните имя или URL с сущностью, чтобы она выглядела следующим образом

{
  id: 1,
  name: 'Cat',
  picture: // url or name of picture
}

2) Сохраните загруженный файл в другой таблице, затем сохраните идентификатор файла вместе с вашей сущностью, и при извлечении сущностей получите связанный файл.Однако, если отношение между сущностью и файлом одно к многим, так как в одной сущности может быть много файлов, вам сначала нужно сохранить сущность, а затем загрузить файлы со ссылкой на сущность.Таким образом, ваша сущность будет выглядеть так

{
  id: 1,
  name: 'Cat',
  pictures: [{fileName: 'cat1'}, {fileName: 'cat2'}]
}