如何使用 rn-fetch-blob 在 react-native 中上传文件？

Question

我是 react-native 的新手。我想使用 rn-fetch-blob 上传带有另一个参数“comment”的文件。我可以使用 react-native-document-picker 包选择文件并获取文件的路径、名称、类型和大小。文件详细信息的日志是：

console.log(res.uri, res.type, res.name, res.size);
Output:
'content://com.android.providers.downloads.documents/document/1445', 'text/html', 'hello.webp', 21476

我只是用 fetch 函数和方法 'POST' ，对此不确定。

var file = {
        name: this.type,
        filename : this.name, 
        data: RNFetchBlob.wrap(this.uri)
    };

var 文件的日志：

{ name: 'text/html',
│ filename: 'hello.webp',
└ data: 'RNFetchBlob-content://content://com.android.providers.downloads.documents/document/1445' }

方法：

fetch('https://beta.hellonepal.io/api/v1/comments',
          {
            method: 'POST',
            headers:
            {
              'Accept': 'application/json',
              'Content-Type' : 'multipart/form-data',
              'Authorization': 'Bearer '+ global.apiToken,
            },
            body: JSON.stringify(
            {
              comment: this.state.newComment,
              comment_file : file
            })

          })
          .then(response => {
            return response.json()
          })
          .then(RetrivedData => {
            console.log(RetrivedData);

          })
          .catch(err => {
            // Do something for an error here
            console.log('Error in adding a comment');
          });
        });

我尝试使用 RNFetchBlob 方法，但不知道如何传递其他参数：

const url = "https://beta.hellonepal.io/api/v1/comments";

RNFetchBlob
.config({
    trusty : true
})
.fetch(
    'POST', 
    url, {
        'Content-Type' : 'multipart/form-data',
    }, file)
.then((res) => {
   console.log(res);
   callback(res);
})
.catch((errorMessage, statusCode) => {
    console.log("Error: "+ errorMessage + " - " + statusCode);
})

Answer 1

您可以按如下方式更改上传：

Content-Type 应该是 json，因为您的 body 类型是 json

 let formdata = new FormData();
     formdata.append("comment", this.state.newComment);
     formdata.append("comment_file", file);
RNFetchBlob.fetch('POST', 'https://beta.hellonepal.io/api/v1/comments', {
    Authorization : 'Bearer '+ global.apiToken,
    body: formdata,
    'Content-Type' : "multipart/form-data",
  })
  .then((response) => response.json())
  .then((RetrivedData) => {
      console.log(RetrivedData);
  })
  .catch((err) => {
    console.log('Error in adding a comment');
  })