从电子内的 angularJS SPA 上传电影到 cloudinary

Question

我想从 angularJS SPA 的电子应用程序前端将文件从用户光盘上传到 cloudinary。

我已经通过从 input[file] 选择照片从 angularJS 上传照片，但这次我想通过绝对路径上传电影到用户光盘上的文件。

因为我使用电子，所以我可以在前层使用 nodeJS 包作为 path，所以我将使用它来定义 .webm 文件的路径，因为它位于根目录中申请。

$scope.uploadVideo = function () {

    var filePath = __dirname + '\videos\example.webm';
    console.log(filePath);

    $upload.upload({
        url: "https://api.cloudinary.com/v1_1/" + cloudinary.config().cloud_name + "/upload",
        data: {
            upload_preset: cloudinary.config().upload_preset,
            file: filePath
        }
    })
    .progress(function (info) {
        console.log(info);
    })
    .then(function (res) {
        console.log(res);
    });
};

filePath 是：

C:\Users\Admin\Documents\ngb\desktopApp\videos\example.webm

这是文件的正确路径。但是上面的代码不起作用并出现此错误：

Possibly unhandled rejection: {"data":{"error":{"message":"Unsupported source URL: C:\Users\Admin\Documents\ngb\desktopApp\videos\example.webm"}},"status":400,"config":{"method":"POST","transformRequest":[null],"transformResponse":

我想我无法通过文件的绝对路径从前面发送到 cloudinary 电影，但我希望我错了。我也可以对 electron 的 nodeJS 端做同样的事情（实际上我试过了并且它正在工作）但是在 nodeJS 中我没有这个 .progress 回调来显示关于上传进度的当前信息这有助于在前面创建一些进度条来显示如何长左.

问题是是否可以通过 angularJS 使用文件路径将其发送到 cloudinary，如果不能，如何通过 nodeJS 获取上传进度。编辑我已经从 cloudinary 协作者那里创建了 for second question. Edit2 After much more googling I found information on github，但服务器端上传的进度不可用，所以我在上面回答了我自己的问题 link。

编辑由于错误是说他们不支持这样的路径，所以我放弃了在 API 调用中提供文件路径的想法。相反，我想将我的视频文件编码为 base64 格式，然后将其传递给 cloudinary，因为他们说 here 这是可能的：

$scope.uploadVideo = function () {

    var filePath = __dirname + '\videos\example.webm';
    var buff = Buffer.from(filePath).toString('base64');
    console.log(filePath);
    console.log(buff);

    $upload.upload({
        url: "https://api.cloudinary.com/v1_1/" + cloudinary.config().cloud_name + "/upload",
        data: {
            upload_preset: cloudinary.config().upload_preset,
            file: 'base64,' + buff
        }
    })
    .progress(function (info) {
        console.log(info);
    })
    .then(function (res) {
        console.log(res);
    });
};

但还是不行..控制台日志

C:\Users\Admin\Documents\ngb\desktopApp\videos\example.webm

QzpcVXNlcnNcQm9yeXNcRG9jdW1lbnRzXGlndFxkZXNrdG9wQXBwXHZpZGVvc1xleGFtcGxlLndlYm0=

错误依旧：

Possibly unhandled rejection: {"data":{"error":{"message":"Unsupported source URL: base64,QzpcVXNlcnNcQm9yeXNcRG9jdW1lbnRzXGlndFxkZXNrdG9wQXBwXHZpZGVvc1xleGFtcGxlLndlYm0="}},"status":400,"config":{"method":"POST","

Answer 1

URI 需要包含实际的文件内容，而不仅仅是路径。例如，使用 formdata-

(function() {
    var f = document.getElementById('f');

    if (f.files.length)
        processFile();

    f.addEventListener('change', processFile, false);

    function processFile(e) {

        var f = document.getElementById('f');
        var file = f.files[0];

        console.log(file);
        var formdata = new FormData();

        formdata.append('file', file);
        //formdata.append('cloud_name', '<cloud_name>');
        formdata.append('upload_preset', '<upload_preset>');

        var xhr = new XMLHttpRequest();
        xhr.open('POST', "https://api.cloudinary.com/v1_1/<cloud_name>/upload",true);

        xhr.onload = function () {
            // do something to response
            console.log(this.responseText);
        };

        xhr.send(formdata);
    }
})();

Answer 2

@rcstraus 正确地指出我没有转换为 base64 文件，而只是转换为文件路径的字符串。

除了我的 file: data 不正确外，我应该 file: 'data:video/webm;base64,' + buff 其中 buff 是 base64 格式的文件而不是路径。

工作代码是：

$scope.uploadVideo = function () {
    $scope.selected.state = $scope.state[3];

    fs.readFile('./videos/example.webm', (err, data) => {
        if(err) alert(err);
        var buff = Buffer.from(data).toString('base64');
        $upload.upload({
            url: "https://api.cloudinary.com/v1_1/" + cloudinary.config().cloud_name + "/upload",
            data: {
                upload_preset: cloudinary.config().upload_preset,
                //tags: 'myphotoalbum',
                //context: 'photo=' + $scope.title,
                file: 'data:video/webm;base64,' + buff
            }
        })
        .progress(function (info) {
            //file.progress = Math.round((e.loaded * 100.0) / info.total);
            //file.status = "Uploading... " + file.progress + "%"
            console.log(info);
        })
        .then(function (res) {
            console.log(res);
        });
    });

};

它结合了 node 和 angularJS 以及 ng-file-upload 包，electron 让它工作。

从电子内的 angularJS SPA 上传电影到 cloudinary

Upload movie to cloudinary from angularJS SPA inside electron

node.js

angularjs

cloudinary

electron