现有的业务完全使用了前端Angular.JS的单页应用,所有请求均通过ajax发出。
现在我想实现在客户端直接向又拍云上传文件,尝试了angular file upload,但是提交的结果是
400: not accept, miss signature
抓包得知,policy和signature的表单数据根本没有提交。
我是这样写的:
$scope.onFileSelect = function ($files) {
var file = $files[0]; //这里我只传单个文件
$scope.upload = $upload.upload({
url: 'http://v0.api.upyun.com/youguess',
method: 'POST',
headers: {'Content-Type': 'multipart/form-data'},
data: {
signature: 'youguess',
policy: 'youguess'
},
fileFormDataName: 'file',
file: file,
formDataAppender: function (formData, key, value) {
if (angular.isArray(value)) {
angular.forEach(value, function(v) {
formData.append(key, v);
});
} else {
formData.append(key, value);
}
}
}).progress(function (event) {
console.log(parseInt(100.0 * event.loaded / event.total));
}).success(function (data, status, headers, config) {
console.log(data);
});
};
我参考了这个github项目的这个和这个issues
what should I do?
我同时还有两个疑问:
参考了这个issue
只要解决signature的安全问题,就可以成功上传文件了,谢谢大家。
解决方法:
hi 我先回答你后面的两个疑问:
signature 的签名是包括
form_api_secret
的,所以若在前端直接写时,确实会存在安全问题:其他人拿到你的form_api_secret
,就可以自己编写表单把文件提交到你的空间,并使用你的流量了。policy 能使用 base64 在前端生成。虽然 policy 是 encode 参数内容,不存在安全问题,但因为
$signature = md5($policy.'&'.$form_api_secret);
,所以还是会有上面说的安全问题。关于代码的问题,已邀请 @PenaFong 来回答了。
签名根据需要请求后端生成,在前端计算会暴露form_api_secret
http://stackoverflow.com/questions/24443246/angularjs-how-to-upload-multipart-form-data-and-a-file
http://uncorkedstudios.com/blog/multipartformdata-file-upload-with -AngularJS