Угловая загрузка файла с параметрами

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 метод: upload):

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

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

Answer 2

Используете ли вы токен на предъявителя? Я использую https://github.com/nervgh/angular-file-upload и столкнулся с подобной проблемой, оказалось, что сообщение файла происходило с использованием AJAX, а не $ http, поэтому служба перехвата авторизации (которая является Предполагалось ввести токен во весь исходящий трафик с моего углового веб-сайта) не работал.

В зависимости от того, как работает ваша библиотека, вы можете столкнуться с подобной проблемой. Если это так, вы должны указать токен в качестве заголовка "Авторизация", что-то вроде строки (где я получаю authData из localStorage после того, как был предварительно авторизован поставщиком токена):

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

Answer 3

Я делаю так:

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 4

Вы можете использовать метод onBeforeUploadItem, чтобы внедрить токен jwt

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

Answer 5

Это здесь работает для меня. Я использую PHP

Вы можете отправлять значения в PHP, используя свойство formData

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'];