使用 Expo & Fetch 上传图片

Question

我正在尝试从我的 React 本机应用程序上传图片。

如果我使用本地节点服务器并且运行此代码：

  var fs = require("fs");
  var options = {
    method: "POST",
    url: "my_URL",
    headers: {},
    formData: {
      file: {
        value: fs.createReadStream("../../assets/image.png"),
        options: {
          filename: "image.jpg",
          contentType: null
        }
      }
    }
  };
  request(options, function (error, response) {
    if (error) throw new Error(error);
    console.log(response.body);
  });

上传成功

但是，使用我们通过应用程序获得的 URI，它不起作用：

这是我在 React Native Expo 上的代码：

 const body = new FormData();

  body.append("file", 'file:///path/to/file/image123.jpg');

  fetch(url, {
    method: "POST",
    body,
    headers: {
      "content-type": "multipart/form-data"
    }
  })
    .then(response => {
      console.log(response, "RESPONSE");
    })
    .then(result => {
      console.log(result, "RESULT");
    })
    .catch(error => {
      console.log(error, "ERROR");
    });

我无法让它工作。我认为这与设备的文件路径有关。

任何帮助将不胜感激。

Answer 1

尝试使用此函数创建 FormData

const createFormData = (uri) => {
  const fileName = uri.split('/').pop();
  const fileType = fileName.split('.').pop();
  const formData = new FormData();
  formData.append('file', { 
    uri, 
    name: fileName, 
    type: `image/${fileType}` 
  });
  
  return formData;
}

如果它不起作用，请检查权限

使用 Expo & Fetch 上传图片

Upload Image With Expo & Fetch

react-native

expo