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 Content-Disposition：form-data;命名=＆＃34;文件＆＃34 ;;文件名=＆＃34; proposalPhoto.jpg＆＃34;内容长度： 22308

我相信添加前缀是因为react-native-file-transfer使用了Cordova多部分。当我尝试打开上传的jpeg文件时，它不再被识别为JPEG文件（并且无法打开）。如果我使用hex文件编辑器并删除前缀，则该文件将再次被识别为正确的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
        })

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

有关详细信息：https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

Answer 2

我终于使用了一个单独的react-react-file-upload fork来增加对原始文件上传的支持：

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

react-native-file-upload的npm版本仅限于多部分文件上传，这会在上传到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);   
    });
}

将本机jpg文件上传到Parse.com

2 个答案: