Question

我已成功使用cordova-plugin-file-transfer将图像文件从设备相机发布到API，例如fileTransfer.upload（fileUrl，url，options）。

但是，cordova-plugin-file-transfer现已被弃用：＆＃34;借助XMLHttpRequest中引入的新功能，不再需要此插件。此Cordova博客文章解释了从此插件迁移到使用XMLHttpRequest的新功能。＆＃34; https://github.com/apache/cordova-plugin-file-transfer

建议的新方法是使用cordova-plugin-file和XMLHttpRequest。 https://cordova.apache.org/blog/2017/10/18/from-filetransfer-to-xhr2.html

window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fs) {
    console.log('file system open: ' + fs.name);
    fs.root.getFile('bot.png', { create: true, exclusive: false }, function (fileEntry) {
        fileEntry.file(function (file) {
            var reader = new FileReader();
            reader.onloadend = function() {
                // Create a blob based on the FileReader "result", which we asked to be retrieved as an ArrayBuffer
                var blob = new Blob([new Uint8Array(this.result)], { type: "image/png" });
                var oReq = new XMLHttpRequest();
                oReq.open("POST", "http://mysweeturl.com/upload_handler", true);
                oReq.onload = function (oEvent) {
                    // all done!
                };
                // Pass the blob in to XHR's send method
                oReq.send(blob);
            };
            // Read the file as an ArrayBuffer
            reader.readAsArrayBuffer(file);
        }, function (err) { console.error('error getting fileentry file!' + err); });
    }, function (err) { console.error('error getting file! ' + err); });
}, function (err) { console.error('error getting persistent fs! ' + err); });

在上面的例子中，我们可以用Angular 5 HttpClient替换XMLHttpRequest，例如

this.http.post(path, body, options);

cordova-plugin-camera文档建议使用DestinationType = FILE_URI或NATIVE_URI，它们都返回类似于以下内容的路径/文件：content：// media / external / images / media / 1249。他们特别警告不要返回base64编码的字符串。

＆＃34;返回base64编码的字符串。 DATA_URL可能非常耗费内存，导致应用程序崩溃或内存不足错误。如果可能，请使用FILE_URI或NATIVE_URI＆＃34; https://github.com/apache/cordova-plugin-camera#module_Camera.DestinationType

这里似乎新的/正确的方法是使用cordova-plugin-file获取文件，将此文件转换为blob，然后将其发布到API。

首先，我想我需要使用来自cordova-plugin-file：https://ionicframework.com/docs/native/file/的resolveLocalFilesystemUrl来转换相机localFile。

this.file.resolveLocalFilesystemUrl(localFile).then((entry) => {
    console.log(entry.fullPath);
});

Android示例：

localFile: content://media/external/images/media/1249
resolvedLocalFile: content://media/external/images/media/1827

但是，我已经无法将solveLocalFile与cordova-plugin-file一起使用来获取文件并转换为blob（然后最终发布到API）。

这是正确的做法吗？如果是这样，那么这是一个有效的代码示例。如果没有，那么正确的方法是什么？请注意，我已经看过发布base64编码字符串的示例，但cordova-plugin-camera明确警告不要这样做。

Answer 1

以下是基于该方法的工作存根：使用cordova-plugin-file获取文件，将文件转换为blob，将blob发布到API。这篇文章在创建此存根时非常有用：https://golb.hplar.ch/2017/02/Uploading-pictures-from-Ionic-2-to-Spring-Boot.html

主要例程：

this.cameraProvider.getPicture()
    .flatMap(imageData => {
        return this.cameraProvider.imageDataToBlob(imageData);
    })
    .flatMap(blob => {
        return this.workerProvider.updateImage(blob);
    }).subscribe();

使用cordova-plugin-camera获取文件：

public getPicture(): Observable<any> {

    const options: CameraOptions = {
        destinationType: this.camera.DestinationType.FILE_URI,
        encodingType: this.camera.EncodingType.JPEG,
        mediaType: this.camera.MediaType.PICTURE,
        sourceType: this.camera.PictureSourceType.PHOTOLIBRARY
    }

    return Observable.fromPromise(
        this.platform.ready().then(() => {
            if (this.platform.is('cordova')) {
                return this.camera.getPicture(options).then((imageData: any) => {

                    // Android DestinationType.FILE_URI returns a local image url in this form: content://media/external/images/media/1249
                    // iOS DestinationType.FILE_URI returns a local image url in this form: file:///var/mobile/Containers/Data/Application/25A3F622-38DB-4701-AB20-90AAE9AC02C8/tmp/cdv_photo_002.jpg
                    return imageData;

                }).catch((error) => {
                    // Handle error.
                })
            }
            else {
                return Observable.of(null);
            }
        })
    )
}

将文件转换为blob：

public imageDataToBlob(imageData): Observable<any> {

    return Observable.fromPromise(this.file.resolveLocalFilesystemUrl(imageData))
        .flatMap((fileEntry: FileEntry) => { // Cast entry to fileEntry.
            return this.fileEntryToObservable(fileEntry)
        })
        .flatMap((file) => {
            return this.fileReaderToObservable(file)
        });
}

public fileEntryToObservable(fileEntry: any): Observable<any> {

    return Observable.create(observer => {
        // Success.
        fileEntry.file(function(file) {
            observer.next(file);
        },
        // Error.
        function (error) {
            observer.error(error)
        })
    });
}

public fileReaderToObservable(file: any): Observable<any> {

    const fileReader = new FileReader();
    fileReader.readAsArrayBuffer(file);

    return Observable.create(observer => {
        // Success.
        fileReader.onload = ev => {
            let formData = new FormData();
            let imgBlob = new Blob([fileReader.result], { type: file.type });
            observer.next(imgBlob);
        }
        // Error.
        fileReader.onerror = error => observer.error(error);
    });
}

将blob发布到API：

// Do NOT add Content-Type multipart/form-data to header.
let headers = new HttpHeaders()

const formData = new FormData();
formData.append('file', blob, 'image');

let options = { headers: headers };
return this.http.post(url, formData, options);

Ionic 3将相机图像发布到API使用cordova-plugin-file

1 个答案: