oss web直傳 服務器簽名 - vue版本

前言：

爲了減輕服務器壓力，採用web直傳的方式，直接把資源(圖片，文件，視頻等)上傳到阿里雲oss服務器。可是阿里只提供 plupload.js 環境下的 demo，看着腦袋生疼。頓時以爲xx雲無恥至極，極度不友好。本來這個事情不必浪費時間寫一篇博客來記錄，這下好了，坑夠大，爲減小廣大前端朋友少踩坑，請往下看。

開始：

我當時用vue作的demo，實際上是互通的。angular，react本身思考。廢話很少說，直接上代碼

// vue 採用的是 axios 環境發起的 post 請求，其實就一個函數搞定，以下。
methods: {
    upload(e){
        // 先準備好 oss 服務器須要的內容
        const photo = window.URL.createObjectURL(e.target.files[0])  // 獲取圖片對象
        const photoName = photo.name  // 原圖片的名稱
        const key = "photoNameOss"  // 存儲到oss的圖片名稱 本身定，必須確保惟一性，否則會覆蓋oss中原有的文件
        const policy = "policy"  // 服務器端同事調oss的API，經過接口返回給前端的 policy
        const policy = "OSSAccessKeyId"  // 服務器端同事調oss的API，經過接口返回給前端的 OSSAccessKeyId
        const policy = "callback"  // 服務器端同事調oss的API，經過接口返回給前端的 callback。這個是須要 oss 觸發這個回調來通知服務器操做結果。
        const policy = "signature"  // 服務器端同事調oss的API，經過接口返回給前端的 signature。這個就是簽名，最關鍵的。
        const url = `http://${本身的域名}.oss-cn-beijing.aliyuncs.com`
        
        // biu一下，提交給oss
        let param = new FormData(); 
        param.append('name', `${photoName}`)
        param.append('key', `${key}`)
        param.append('policy', `${policy}`)
        param.append('OSSAccessKeyId', `${OSSAccessKeyId}`)
        param.append('success_action_status', 200)  // 不要問爲何，照作
        param.append('callback', `${callback}`)
        param.append('signature', `${signature}`) 
        param.append('file', photo, photoName); // 這個**切記**必定要放到最後去 append ，否則阿里雲會一直報 key 的錯誤
        axios.post(url, param)
            .then(response => {
                console.log("response == ", response)
            })
            .catch((err) => {
                console.log("err == ", err)
            })
    }
}

必定要記住那個 切記 ，必定要把文件對象 append 到最後，必定不要忘記，這個地方我卡了2小時。

vue 的 template 的使用以下

<input class="input-file" name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="upload" />

結束：

這樣就搞定了。 是否是一點都不難？ 總比被人強迫使用 plupload.js 強吧! 這輩子我都不會讓 plupload.js 進入個人插件庫，我不喜歡被強迫。