javascript - 带参数的 Angular 文件上传

Question

我正在使用Angular-file-upload通过执行以下操作将文件上传到 API：

var upload = function (file) {
    return $upload.upload({
        url: '/api/place/logo',
        data: {place_id: 1, token: <some_token>},
        file: file
    });
};

所有参数似乎都设置正确。API 期望token存在以进行身份​​验证。出于某种原因，API 永远不会收到客户端发布的token或place_id发布的内容，并且总是以BadRequest.

这里有什么问题？

Answer 1

尝试这个。

在角度控制器：

.controller('uploadCtrl', function ($scope, FileUploader) {
    $scope.uploader = new FileUploader({
        url: "./api/file/upload",
        formData: [
            { "data1": "value1" },
            { "data2": "value2" }
        ]
    });
});

在服务器端（在 FileController 中，方法：上传）：

var provider = GetMultipartProvider();
var result = await Request.Content.ReadAsMultipartAsync(provider);

var data1 = result.FormData.Get("data1");
var data2 = result.FormData.Get("data2");

Answer 2

你在使用 Bearer 令牌吗？我正在使用https://github.com/nervgh/angular-file-upload并遇到了类似的问题，结果文件发布是使用 AJAX 而不是 $http 发生的，因此授权拦截器服务（即应该将令牌注入到我的角度网站的所有传出流量中）不起作用。

根据您的库的工作方式，您可能会遇到类似的问题。如果是这样，您必须将令牌指定为“Authorization”标头，类似于（在之前由令牌提供者授权后，我正在从 localStorage 检索 authData）：

tokenHeader = 'Bearer ' + authData.token;
var uploader = $scope.uploader = new FileUploader({
    headers: { "Authorization": tokenHeader },
    url: _uploadUrl,
    withCredentials: true
 });

Answer 3

这对我有用。我正在使用 PHP

您可以使用 formData 属性向 PHP 发送值

app.controller ('FileUploadCtrl', ['$ scope', 'FileUploader', 
function ($ scope, FileUploader) {
var uploader = $ scope.uploader = new FileUploader ({
    url: '.myapi / mycontrollers / myuploadfile.php',
    formData: [{
             data1: 'value1',
             data2: 'value2',
             dataN: 'valueN'
           }]
});

在 PHP 中，您使用 $_REQUEST 来捕获 formData 中可用的信息

$myValue1 = $_REQUEST ['data1'];
$myValue2 = $_REQUEST ['data2'];
$myValue3 = $_REQUEST ['dataN'];

Answer 4

我喜欢这样：

var tokenHeader = $http.defaults.headers.common.Authorization;

var uploader = $scope.uploader = new FileUploader({
    url: '/api/WS_Books/PostBooks',
    autoUpload: true,
    headers: { "Authorization": tokenHeader },
    withCredentials: true
});

Answer 5

您可以使用 onBeforeUploadItem 方法注入 jwt 令牌

    uploader.onBeforeUploadItem = function (item) {
      item.headers = {
      'Authorization': 'Bearer ' + localStorage.getItem('token_name')
       };
    };