使用 Fetch 将图像从 React Native 上传到 Loopback API

Question

你好这是我第一次尝试构建API。我想做的是通过 react-native 将保存在我的 phone 上的图像发送到将图像保存在我的计算机上的环回容器。我在正确格式化表单数据时遇到问题，因此图像将被环回接受。我一直在努力：

let photo = {names: 'file', uri:'file:///storage/emulated/0/Pictures/IMG_20161028_094032.jpg'}
let formdata = new FormData();
formdata.append(photo.names, photo.uri)

fetch('http://192.168.0.15:3000/api/containers/container2/upload',{
method: 'POST',
body: formdata
}).then(response => {
}).catch(err => {
})

我得到的回复是：

_bodyText: '{"result":{"files":{},"fields":{"file":["file:///storage/emulated/0/Pictures/IMG_20161028_094032.jpg"]}}}' }

这是不正确的，因为文件应该在 "files" 而不是 "fields"

Answer 1

尝试使用 xhr 而不是 fetch。这是此场景的 example provided by Facebook...

// Polyfill for XMLHttpRequest2 FormData API, allowing multipart POST requests with 
// mixed data (string, native files) to be submitted via XMLHttpRequest.

var photo = {
  uri: uriFromCameraRoll,
  type: 'image/jpeg',
  name: 'photo.jpg',
};

var body = new FormData();
body.append('authToken', 'secret');
body.append('photo', photo);
body.append('title', 'A beautiful photo!');

xhr.open('POST', serverURL);
xhr.send(body);

使用 Fetch 将图像从 React Native 上传到 Loopback API

Uploading an Image from React Native to Loopback API with Fetch

android

loopbackjs

react-native