data-url with {{ uploadUrl }} 不在范围 url (AngularJS) 中交换

Question

我正在使用 jquery 文件上传到 post 一个文件到 url。在我的控制器中，我有类似这样的东西来生成 url 我要 post 到。

uploadService.getUploadURL($scope.projectId).then(function (url) {
     $scope.uploadUrl = url.uploadUrl;
});

那么在我看来我有这个来填写数据-url

<span id="btn-browse" class="btn btn-success btn-file">Browse<input type="file" name="file" data-url="{{uploadUrl}}" multiple upload /></span>

我运行遇到的问题是，当我 post 一个文件时，它最终使用 url、http://localhost/%7B%7BuploadUrl%7D%7D，因为它没有替换 {{uploadUrl }}.

我知道这很可能是非常基础的，我遗漏了一些简单的东西。如果有人可以帮助解决这个问题或指出正确的方向，我将不胜感激！

** 根据下面的上传代码请求 **

来自上传控制器

$scope.upload = function () {
    uploadService.upload();
}

来自上传服务

upload: function () {
    $.each(_files, function (ix, file) {
         file.submit();
    });
    this.clear();
}

还值得一提的是，jquery 文件上传是在如下指令中实现的：

$(element).fileupload({
    dataType: "text",
    add: function (e, data) {
         uploadService.add(data);
    },

    progressall: function (e, data) {
         var progress = parseInt(data.loaded / data.total * 100, 10);
         uploadService.setProgress(progress);
    },

    done: function (e, data) {
         uploadService.uploadDone();
    }
});

Answer 1

即使您已创建指令，但在创建文件上传时 url 尚未加载。

您可以做的是在 uploadUrl 的指令中添加 watch ，如果它的值发生变化，则使用 jquery.

创建文件上传器

$scope.watch('uploadUrl',function(newValue, oldValue ){
   if(newValue!==oldValue){
    setTimeout(function(){
       $(element).fileupload({
        dataType: "text",
        add: function (e, data) {
           uploadService.add(data);
         },

         progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            uploadService.setProgress(progress);
         },

         done: function (e, data) {
            uploadService.uploadDone();
         }
     });
    });
   }
});

data-url with {{ uploadUrl }} 不在范围 url (AngularJS) 中交换

data-url with {{ uploadUrl }} not swapping in scope url (AngularJS)

javascript

jquery

angularjs

jquery-file-upload