从 react-native 获取文件以上传与 `<input type="file" onChange={this.fileChangedHandler}> 相同的图像答案

【问题标题】：Get file from react-native to upload image same as `<input type="file" onChange={this.fileChangedHandler}> `从 react-native 获取文件以上传与 `<input type="file" onChange={this.fileChangedHandler}> 相同的图像
【发布时间】：2020-01-15 10:34:13
【问题描述】：

我试过了

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

并使用

axios

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

const config = {
            headers: {
                'content-Type': 'multipart/form-data'
            }
        }
 MY_API().then(instance => {

// it is axios instance
            instance.post("/api/v1/upload",
                { body }
                , config).then(res => {
                    console.log(JSON.stringify(res));

                }).catch(err => {
                    console.log(err);
                })
        }
        )

在删除配置时我得到

错误 503

并且通过配置它给出了

错误：多部分：未找到边界

并且可以与 POSTMAN 一起正常工作...以及标题

我也尝试过上传文件（blob），但同样的错误

错误：多部分：未找到边界

 dataURLtoFile(dataurl, filename) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, {type:mime});
}

//Usage example:
var file = dataURLtoFile('data:text/plain;base64,aGVsbG8gd29ybGQ=', 'hello.txt');
console.log(file);

API 在带有代码的 ReactJS 中运行良好

编辑：我已经使用React-native-fetch-blob解决了这个问题，但希望使用 axios 来解决，

这里是代码：

 RNFetchBlob.fetch('POST', 'https://helloapp.herokuapp.com/api/v1/upload', {
            'authorization': jwtToken,
            'Content-Type': 'multipart/form-data',
        },
            [
                { name: 'image', filename: 'avatar-png.png', type: 'image/png', data: base64logo },
                { name: 'name', data: name }
            ]
        ).then((resp) => {
            console.log(resp);
        }).catch((err) => {
            console.log(err);
        });

【问题讨论】：

标签： javascript node.js reactjs react-native react-native-fs

【解决方案1】：

我已经使用React-native-fetch-blob 解决了这个问题，但希望使用 axios 来解决，

这里是代码：

 RNFetchBlob.fetch('POST', 'https://helloapp.herokuapp.com/api/v1/upload', {
            'authorization': jwtToken,
            'Content-Type': 'multipart/form-data',
        },
            [
                { name: 'image', filename: 'avatar-png.png', type: 'image/png', data: base64logo },
                { name: 'name', data: name }
            ]
        ).then((resp) => {
            console.log(resp);
        }).catch((err) => {
            console.log(err);
        });

【讨论】：

【解决方案2】：

永远不要在发送文件时定义内容类型标头。浏览器/邮递员会自动添加它，如下所示。

Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7BojnnMEteO0aHWP

表单边界是表单数据的分隔符。发送请求时会计算边界，因此您无法对其进行硬编码。

这就是为什么找不到错误边界。

现在你可以使用 fetch ， axios 任何东西，它会工作。

这是非常重要的信息，没有在 MDN Fetch 文档中捕获

【讨论】：