React Native jpg 文件上传到 Parse.com

Question

我正在实现一个 React Native 应用程序，它使用 react-native-file-transfer 将 jpeg 文件上传到 Parse.com。我选择这个库是因为它通过 Object-C 实现文件传输，因此比在 React Native 中实现传输具有性能优势（即避免通过 React-Native / iOS 桥传输数据）。

我上传的文件是一个已知良好的 jpeg 文件，但是当我使用 react-native-file-transfer 上传它时，它会在文件的开头添加以下前缀：

------react.file.transfer.form.boundary 内容配置：表单数据；名称=“文件”； filename="proposalPhoto.jpg" 内容长度： 22308

我相信添加前缀是因为 react-native-file-transfer 使用 Cordova 多部分。当我尝试打开上传的 jpeg 文件时，它不再被识别为 JPEG 文件（并且无法打开）。如果我使用十六进制文件编辑器并删除前缀，该文件将再次被识别为正确的 JPEG 文件。

是否有人建议将 JPEG 文件上传到 parse.com，而不会使生成的 JPEG 文件不可读或直接在 React Native 中上传会影响性能？

顺便说一句，这是我使用 react-native-file transfer 实现的代码...

uploadPhotoToParse( photoPath ) {

    var headers = {
        'X-Parse-Application-Id': CONFIG.PARSE_APP_ID,
        'X-Parse-REST-API-Key': CONFIG.PARSE_REST_API_KEY,
        'Content-Type': 'image/jpeg2'
    } 
    var data = {};

    photoURL="/Users/wookiem/Library/Developer/CoreSimulator/Simulator/446F37B1-477B-4492-B2B8-8C8FE33327DF/data/Containers/Data/Application/1B1B2449-42F1-40FB-85ED-4781CC68E191/Documents/logo.jpg"

    var obj = {
            uri: 'file://' + photoPath,
            uploadUrl: 'https://api.parse.com/1/files/pic.jpg',
            fileName: 'proposalPhoto.jpg',
            mimeType: 'image/jpeg',
            headers: headers,
            data: data
    };  

    NativeModules.FileTransfer.upload(obj, (err, res) => {
            console.log(res);   
    });
}

更新 #2 -- 使用 fetch 方法，尝试上传原始 jpeg 文件。

这会导致上传一个零字节文件。这是我的代码：

uploadPhotoToParse() {

    photoURL="file:///Users/wookiem/logo.jpg"

    fetch('https://api.parse.com/1/files/pic.jpg',
        {
            method: 'POST',
            headers: {
                'X-Parse-Application-Id': CONFIG.PARSE_APP_ID,
                'X-Parse-REST-API-Key': CONFIG.PARSE_REST_API_KEY,
                'Content-Type': 'image/jpeg'
            },
            url: photoURL
        }
    ).then((response) => {
        if ((response.status === 200 || response.status === 201)) {
            return {};
        } else {
            var res = JSON.parse(response._bodyInit);
            throw (res);
        }
    })
    .catch((error) => {
        throw(error);
    });
}

Answer 1

您可以使用 fetch() 上传照片，使用的格式与您的格式基本相同。

var formData = new FormData();
    formData.append('photo', {uri: photo_uri_here, name: 'photo', type: 'image/jpg'});
fetch('example.com',
        {
            method: 'POST',
            headers: {
                "Accept": "multipart/form-data",
                "Content-Type": "multipart/form-data"
            },
            body: formData
        })

我不相信这会遭受你提到的同样的“性能打击”，因为我不相信转移是在 RN 内部完成的（但如果你已经尝试过，请纠正我）。

欲了解更多信息：https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

Answer 2

我终于通过使用一个单独的 react-native-file-upload 分支来完成这项工作，该分支增加了对原始文件上传的支持：

https://github.com/rebe1one/react-native-file-transfer.git

npm 版本的 react-native-file-upload 仅限于多部分文件上传，这在上传到 Parse.com 时打破了 jpeg 文件约定。

这是我使用的代码：

uploadPhotoToParse( photoPath ) {

    var headers = {
        'X-Parse-Application-Id': CONFIG.PARSE_APP_ID,
        'X-Parse-REST-API-Key': CONFIG.PARSE_REST_API_KEY,
        'Content-Type': 'image/jpeg2'
    } 
    var data = {};

    var obj = {
            uri: 'file://' + photoPath,
            uploadUrl: 'https://api.parse.com/1/files/pic.jpg',
            fileName: 'proposalPhoto.jpg',
            contentType: 'application/octet-stream',
            mimeType: 'image/jpeg',
            headers: headers,
            data: data
    };  

    NativeModules.FileTransfer.upload(obj, (err, res) => {
            console.log(res);   
    });
}