现有的业务完全使用了前端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?
我同时还有两个疑问:
Referenced this issue
As long as the signature security issue is resolved, the file can be uploaded successfully. Thank you everyone.
Solution:
hi Let me answer your next two questions first:
The signature of
signature includes
form_api_secret
的,所以若在前端直接写时,确实会存在安全问题:其他人拿到你的form_api_secret
, and you can write your own form to submit files to your space and use your traffic.policy can be generated on the front end using base64. Although policy is the content of the encode parameter and there is no security issue, but because of
$signature = md5($policy.'&'.$form_api_secret);
, there will still be the security issue mentioned above.Regarding the code question, @PenaFong has been invited to answer it.
The signature is generated by requesting the backend as needed, and the form_api_secret will be exposed when calculated on the frontend
http://stackoverflow.com/questions/24443246/angularjs-how-to-upload-multipart-form-data-and-a-file
http://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs