javascript 带参数的角度文件上传
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27708559/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular File Upload with Parameters
提问by Ashesh
I'm using Angular-file-uploadto upload files to an API by doing this:
我正在使用Angular-file-upload通过执行以下操作将文件上传到 API：
var upload = function (file) {
return $upload.upload({
url: '/api/place/logo',
data: {place_id: 1, token: <some_token>},
file: file
});
};
All the parameters seem to be correctly set. The API expects the tokento be present for authentication. For some reason, the API never receives the tokenor the place_idposted by the client and always responds with a BadRequest.
所有参数似乎都设置正确。API 期望token存在以进行身份验证。出于某种原因，API 永远不会收到客户端发布的token或 ，place_id并且总是以BadRequest.
What is the issue here?
这里有什么问题？
回答by Brian
Try this.
试试这个。
At angular controller:
在角度控制器：
.controller('uploadCtrl', function ($scope, FileUploader) {
$scope.uploader = new FileUploader({
url: "./api/file/upload",
formData: [
{ "data1": "value1" },
{ "data2": "value2" }
]
});
});
At server side(In FileController, method: upload):
在服务器端（在 FileController 中，方法：上传）：
var provider = GetMultipartProvider();
var result = await Request.Content.ReadAsMultipartAsync(provider);
var data1 = result.FormData.Get("data1");
var data2 = result.FormData.Get("data2");
回答by Dale Holborow
Are you using Bearer token? I'm using the https://github.com/nervgh/angular-file-uploadand ran into a similar problem, turns out the file post was occurring using AJAX and not the $http, so the authorisation interceptor service (which is supposed to inject the token into all outgoing traffic from my angular website) wasn't working.
您是否使用不记名令牌？我正在使用https://github.com/nervgh/angular-file-upload并遇到了类似的问题，结果文件发布是使用 AJAX 而不是 $http 发生的，所以授权拦截器服务（这是应该将令牌注入我的角度网站的所有传出流量中）不起作用。
Depending on how your library works, you might be running into a similar issue. If so, you have to specify the token as the 'Authorization' header, something along the lines of (where I am retrieving authData from localStorage after having been authorized previously by the token provider):
根据您的库的工作方式，您可能会遇到类似的问题。如果是这样，您必须将令牌指定为“授权”标头，类似以下内容（我在先前由令牌提供者授权后从 localStorage 检索 authData）：
tokenHeader = 'Bearer ' + authData.token;
var uploader = $scope.uploader = new FileUploader({
headers: { "Authorization": tokenHeader },
url: _uploadUrl,
withCredentials: true
});
回答by Dinekro
I do like this:
我喜欢这样：
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
});
回答by Sachintha Sandaruvan
you can use onBeforeUploadItem method to inject jwt token
您可以使用 onBeforeUploadItem 方法注入 jwt 令牌
uploader.onBeforeUploadItem = function (item) {
item.headers = {
'Authorization': 'Bearer ' + localStorage.getItem('token_name')
};
};
回答by Blomersi
This here worked for me. I'm using PHP
这对我有用。我正在使用 PHP
You can send values ??to PHP using the formData property
您可以使用 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'
}]
});
In PHP you use $ _REQUEST to capture the information available in formData
在 PHP 中，您使用 $_REQUEST 来捕获 formData 中可用的信息
$myValue1 = $_REQUEST ['data1'];
$myValue2 = $_REQUEST ['data2'];
$myValue3 = $_REQUEST ['dataN'];
