前端oss上傳文件
工作筆記保存，前端使用oss上傳文件方法。
小型互聯網公司（或者項目成本預算較低）為減少服務器壓力節約成本，選擇使用阿裏雲是一個不錯對選擇，整個過程在前端操作，只需要保存上傳後對oss地址，不多說了，直接上代碼（官方API：https://help.aliyun.com）
首先引用oss <script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-x.x.x.min.js"></script> 有多個版本選擇，之間的差異不大，只是封裝的key和value的變更和新增一些原型方法。
作者引用4.4.4版本 <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script> 也可以下載到本地使用哦。
開始使用，首先需要實例化OSS.Wrapper，參數為開發者信息對象，官方說明
var client = new OSS.Wrapper({region: ‘<oss region>‘,//雲賬號AccessKey有所有API訪問權限，建議遵循阿裏雲安全最佳實踐，創建並使用STS方式來進行API訪問accessKeyId: ‘<Your accessKeyId(STS)>‘,accessKeySecret: ‘<Your accessKeySecret(STS)>‘,stsToken: ‘<Your securityToken(STS)>‘,bucket: ‘<Your bucket name>‘//自定義的上傳後地址，加在oss前});
將申請的keyId,accessKeySecret放入/如何獲取？
-
登錄阿裏雲控制臺。
-
將鼠標放在右上方的用戶名區域，在彈出的快捷菜單中選擇accesskeys。
-
系統彈出安全提示對話框，單擊繼續使用AccessKey。
頁面顯示Access Key ID和Access Key Secret。
var client = new OSS.Wrapper({
region: ‘oss-cn-hangzhou‘,
accessKeyId: ‘LxxxxxxXL‘,
secure: true,
accessKeySecret: ‘qy3IXXXXXXXXXDVuasw4q‘,
bucket: ‘XX-minapp‘
});
下面，我們就可以使用oss上傳文件了，在頁面上加一個file,綁定change事件，接收文件參數
function upload(obj){
var file=obj.files[0];//獲取文件
var val= obj.value;
var img_url = "https://xxx-img.xxxx.com/";//阿裏雲給的域名
var suffix = val.substr(val.indexOf("."));
var storeAs = "studio_course/"+new Date()*1+suffix;
//將文件重新命名
client.multipartUpload(storeAs, file).then(function (result) {
//storeAs為上傳後的文件地址和文件名（未包含域名）
if (result.res.requestUrls[0]) {
var url = img_url + storeAs;//這裏是自己根據上傳後的地址進行拼接
var backurl=result.res.requestUrls[0].split("?")[0];//截取前面的地址，可以直接在瀏覽器打開
}
}).catch(function (err) {
console.log(err);
});
}
multipartUpload方法接受兩個參數，參數一為上傳後的文件路徑和文件名（自定義），為防止重復建議使用時間戳；參數二為文件對象
回調函數，成功回調返回一個對象，包含文件的信息
上傳成功，可以看到上傳後的文件地址，我們可以截取？之前的部分，也可以自己拼接出文件地址，因為我們上傳之前已經知道了自己文件的域和名稱，代碼中已經說明。
這樣前端就完成了整個文件上傳，後端直接保存文件地址就可以了。
至此完成整個開發階段，向所有奮鬥在前線的前端同行致敬。工作辛苦，但也要記得休息好。
前端oss上傳文件