vue axios配合php實現OSS直傳

前兩天做專案的時候用到了oss瀏覽器直傳，遇到了以下幾個問題，在此做個記錄：

分析了阿里雲的瀏覽器直傳案例之後，我發現這種方式需要使用post對oss位址進行檔案上傳，請求體至少需要以下幾個資訊：key，policy，ossaccesskeyid，success_action_status，signature，file等6個鍵值。向後台請求的ajax介面應返回的資訊為：

要特別注意後台傳回來的dir，不能以/開頭，否則使用post上傳時會一直出現key值不合法的錯誤資訊。另外，dir結尾最好有/，否則前端還需自行加入。

post操作提交表單編碼必須為「multipart/form-data」，即header中content-type為multipart/form-data; boundary=******這樣的形式。

key值為檔案存放到oss的目錄+檔名，原本的檔名在key中應寫成$

，阿里雲會自動進行識別，檔名可另行設定，可設定為key = dir + randomname + 「$」。

file值即為檔案內容，檔案或文字內容，必須是表單中的最後乙個域。這一點要額外注意，file必須是最後乙個新增到formdata中的。

使用axios的post方式進行檔案上傳時，要注意觀察是否會發起預請求，即options請求。如果沒有，無法通過oss的cors設定，上傳檔案的請求會被跨域限制直接駁回。此時就需要使用axios方法即axios({});這一次oss應該就可以識別了。

阿里雲的跨域設定如下圖所示，因為對比之後我發現我的請求頭相比於阿里雲的demo多了乙個accept，猜測可能是被攔截了，所以就設定允許headers 裡面加了乙個accept。

儲存到oss的檔名為 host + key;

至此，一切問題都迎刃而解。