javascript — React-Native отправляет файл изображения с XHR на серверную часть Api

Question

javascript — React-Native отправляет файл изображения с XHR на серверную часть Api

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

Я использую это: https://github.com/marcshilling/react-native-image-picker

После выбора изображения я получаю URI изображения, что-то вроде этого:
Файл: ///storage/151A-3C1B/Pictures/image-c47d8624-8530-43df-873e-e31c2d27d0e9.jpg

Я также могу получить закодированную в base64 строку изображения, но я не хочу иметь дело с base64, так как это замедляет работу приложения, и в результате запрос увеличивается примерно на 1/3.

Итак, мой вопрос, у меня есть URI, как указано выше, как я могу отправить содержимое файла на мой API-интерфейс? Ожидается multipart / form-data, название «фото».

Я хотел попробовать это:

var formData = new FormData();
formData.append('photo', CONTENTS);

Но я не знаю, как получить содержимое файла или как передать URI файла объекту formData, чтобы отправлялось содержимое, а не сама строка URI. Любая помощь, пожалуйста?

3

javascript php react-native

Решение

Другие решения

Это старый пост, но если он поможет другим, это поможет:

var formData = new FormData();
formData.append("photo", {
uri: imageUri,
type: "image/jpg"});
axios.post(serviceUrl, formData);

0

Источник

Accepted Answer

Вы можете попробовать что-то вроде этого. Это сработало для меня:

// файл api.js

'use strict';

import request from 'superagent';
import {NativeModules} from 'react-native';

var api = (method, URL) => {
var r = request(method, apiURL);
return r;
}

api.uploadPhoto = (fileName, fileUri, uri, callback) => {
var upload = {
uri: fileUri, // either an 'assets-library' url (for files from photo library) or an image dataURL
uploadUrl: // your backend url here,
fileName: fileName,
mimeType: 'image/jpeg',
headers: {},
data: {}
};

NativeModules.FileTransfer.upload(upload, (err, res) => {
console.log(err, res);
if (err || res.status !== 200) {
return callback(err || res.data || 'UNKNOWN NETWORK ERROR');
}

callback();
});
};

export default api;

// тогда вы можете назвать свое действие таким образом

'use strict';

import request from './api';

request.uploadPhoto('picture', uri, apiURL, (err) => {
if (err) {
console.log(err);
return;
}
});

0