angularjs - 从 Electron 内部的angularJS SPA将电影上传到cloudinary

Question

我想从用户光盘将文件从angularJS SPA的 Electron 应用程序的正面上传到cloudinary。
我已经通过从input[file]中选择照片来从angularJS上传照片，但是这次我想通过绝对路径将电影上传到用户光盘上的文件。
由于我使用 Electron ，因此我可以在顶层内使用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":

我想我无法通过绝对路径将文件从前端发送到云端电影，但我希望我错了。我也可以对 Electron 的nodeJS端进行相同的操作(实际上我已经尝试过并且正在工作)，但是在nodeJS中，我没有这个 .progress回调，它没有显示有关上载进度的当前信息，这有助于在前面创建一些Progressbar来显示剩余的时间。
问题是是否可以通过angularJS使用文件路径将其发送到cloudinary，如果不能，如何通过nodeJS获取上传进度。 编辑我已经为第二个问题创建了 separate question。 Edit2 在进行更多谷歌搜索之后，我从cloudinary合作者那里发现 information on github不能在服务器端上载进度，因此我在上面的链接中回答了我自己的问题。

编辑
因为错误是说他们不支持这样的路径，所以我放弃了在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);
    }
})();