又拍雲端儲存 - 我能透過Angular.JS來使用表單提交API嗎
高洛峰
高洛峰 2017-05-15 16:49:07
0
4
683

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

我同時還有兩個疑問:

  1. signature我可以直接md5加密好寫上,這個md5直接寫在客戶端是否有安全問題?
  2. policy能不能在js中base64編碼生成,因為我看官方給的demo是在php內生成的。如果可以在前端生成,把這個過程寫在前端是否也會引發安全問題?
高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

全部回覆(4)
世界只因有你

參考了這個issue
只要解決signature的安全問題,就可以成功上傳檔案了,謝謝大家。

解決方法:

  • 去掉headers
  • 去掉formDataAppender
为情所困

hi 我先回答你後面的兩個問題:

  • signature 的簽名是包含form_api_secret的,所以若在前端直接写时,确实会存在安全问题:其他人拿到你的form_api_secret,就可以自己寫表單把文件提交到你的空間,並使用你的流量了。

  • policy 能使用 base64 在前端產生。雖然 policy 是 encode 參數內容,不存在安全問題,但因為 $signature = md5($policy.'&'.$form_api_secret);,所以還是會有上面說的安全問題。

關於代碼的問題,已邀請 @PenaFong 來回答了。

Ty80

簽章根據需要請求後端生成,在前端計算會暴露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

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板