現有的業務完全使用了前端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