React Native +世博会axios 文件上传无法正常工作，因为 axios 未将表单数据发送到服务器

Question

我正在尝试将带有 React Native 前端和 axios 的图像上传到我的后端。

。

const pickImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: false,
      aspect: [9, 16],
      quality: 1,
    });

    console.log(result.uri);

    if (!result.cancelled) {
      console.log(result);
      setPhoto(result);
    }
  };

现在您可以清楚地看到我正在使用 ImagePicker 库设置照片状态

然后我创建一个表单数据实例：

     let img_to_upload = {  
        type: 'image/jpeg',    
        name: 'random-file-name',  
        uri: Platform.OS === 'android' ? photo.uri : photo.uri.replace('file://', ''),
    };  

    let formData = new FormData();
    formData.append("title", 'this is tandom text');
    formData.append("file", img_to_upload);

在这里您可以清楚地看到我启动了一个表单数据对象，然后向表单添加两个字段。

1. 最后但并非最不重要
2. 的一点

是，我将其发送到服务器：

axios({
      method: 'POST',
      url: U_R_L,  
      data: formData,
      transformRequest: (d) => d, 
      headers: { 
        "Content-Type": "multipart/form-data; charset=utf-8; boundary=------random-boundary",
      }
    })
    .then((response) => {
       console.log("response : ");  
       console.log(response.data);    
    }, (error) => {
        console.log("error : "); 
        console.log(error); 
    })
    .then(() => {
      setProgress(false);
    });

但它从不向服务器发送任何文件。

这是错误：

但是当我使用 REST 客户端测试同一端点时，它可以工作。

Answer 1

Axios 的 FormData 自 v0.25 起就已被破坏。
他们毫无理由地尝试优化 FormData 检测实用程序。不幸的是，对于非浏览器环境，正确的检测失败。

您现在可以在这里找到解决方法：
https://github.com/axios/axios/issues/4406#issuecomment-1048693170

TL;DR

const formData = new FormData();
...
const response = await axios.post('/URL', formData, {
  headers: {
    'Content-Type': 'multipart/form-data',
  },
  transformRequest: (data, headers) => {
    return formData; // this is doing the trick
  },
});

只需传递一个transformRequest并返回您的formData，一切都会再次神奇地“工作”。不过，这是一个解决方法（我在这个问题上花了 5 个小时），希望在即将发布的版本中得到修复。

Answer 2

无需在请求中设置 content-type 标头。它会自动识别您的请求包含缓冲区数据。因此，您只需传递请求而不设置 multipart content-type 标头。

我也对同样的问题感到困惑。我的 MacBook 使用邮递员发送请求没有任何问题，而我的 Android 设备在发送 multipart 请求时遇到问题。

解决方案

网络连接不良是这部分的主要问题。因此，只需将您的移动网络更改为任何其他具有更好互联网连接的网络即可。并再次检查。当然它解决了您的问题

用于发送多部分数据的本机 javascript 查询 - axios 也使用相同的本机库

 var data = new FormData();
    data.append("file", {
                          name: 'image.png',
                          type: 'image/png,
                          uri: 'file:///file-cache-url'
                        }, "image.png");
     
    var xhr = new XMLHttpRequest();
    xhr.withCredentials = true;
    
    xhr.addEventListener("readystatechange", function() {
      if(this.readyState === 4) {
        console.log(this.responseText);
      }
    });

xhr.open("POST", "http://127.0.0.1:3000/data/upload");

xhr.send(data);

Answer 3

以 BLOB 形式获取图像

 const blob = await new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.onload = function () {
      resolve(xhr.response);
    };
    xhr.onerror = function (e) {
      reject(new TypeError("Network request failed"));
    };
    xhr.responseType = "blob";
    xhr.open("GET", "FILE_URI_HERE", true);
    xhr.send(null);
  });

Answer 4

解决此问题的此处使用的transformRequest方法对我不起作用，因此我采用了使用JSON.stringify的解决方法。

const formData = new FormData()
...

MyApiInstance.post('endpoint', JSON.stringify(formData)).then(() ...

希望这对某人有帮助。