Question

我们正在我们的应用程序中构建照片上传功能，该功能是使用react native。

构建的

我使用的是：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，名称为“photo”。

我想试试这个：

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

但我不知道如何获取文件的内容，或者如何将文件URI传递给formData对象，因此将发送内容，而不是URI字符串本身。有什么帮助吗？

Answer 1

你可以尝试这样的事情。它对我有用：

// api.js file

'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;
  }
});

Answer 2

这是一个古老的帖子，但是如果它可以帮助其他人，将可以解决问题：

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

React-Native使用XHR将图像文件发送到Api后端

2 个答案: