使用python3.7+Vue.js2.0+Django2.0.4異步前端通過(guò)api上傳文件到七牛云云端存儲(chǔ)
原文轉(zhuǎn)載自「劉悅的技術(shù)博客」https://v3u.cn/a_id_130

之前一篇文章是通過(guò)普通js+tornado來(lái)上傳七牛云：使用Tornado配合七牛云存儲(chǔ)api來(lái)異步切分上傳文件，本次使用vue+django來(lái)進(jìn)行異步上傳，因?yàn)楫吘箆ue.js才是目前的前端的主流。

首先注冊(cè)七牛云：qiniu.com，進(jìn)入你的七牛云賬號(hào)，打開(kāi)秘鑰頁(yè)，記錄下你的ak和sk

image

隨后新建一個(gè)云存儲(chǔ)空間，這里空間名字一定要記錄一下：

image

此時(shí)我們用django寫(xiě)一個(gè)獲取uptoken的接口，使用drf框架來(lái)寫(xiě)，注意別忘了安裝七牛云擴(kuò)展 pip install qiniu

#七牛云token
from qiniu import Auth
class QiNiu(APIView):
    def get(self,request):
        q = Auth('E2IZM3koC1GR1DUqJHactmixzdyZZhx0edBKqDsk','GDnMkvRoE\_kFhCSuvdqQj0VcNsRDOHzYJJ\_bVd0\_')
        token = q.upload\_token('redinnovation')
        print(token)
        res = {}
        res\['uptoken'\] = token

        return Response(res)

之后啟動(dòng)django服務(wù)：python3 manage.py runserver

訪問(wèn)django服務(wù)，確保每一次都會(huì)生成新的token,訪問(wèn)http://localhost:8000/uptoken/

image

接口已經(jīng)調(diào)試好，回到vue.js頁(yè)面，添加一個(gè)上傳控件

{{ imgLoadPercent }}

 <input @change="uploadInputchange"  id="uploadFileInput" type="file" >

這里的imgLoadPercent是上傳進(jìn)度的展示

data () {
      return {
          uptoken:'',
        imgLoadPercent:'',
}
}

然后在methods里添加幾個(gè)方法：

get\_token(){

         this.axios.get('http://localhost:8000/uptoken/').then((result) =>{
        console.log(result);
        this.uptoken = result.data.uptoken;
        });
        },
    //觸發(fā)input change事件
    uploadInputchange(){
        let file = document.getElementById("uploadFileInput").files\[0\];   //選擇的圖片文件
        this.get\_token();
        this.uploadImgToQiniu(file);
    },
    //上傳圖片到七牛
    uploadImgToQiniu(file){

        console.log(this.uptoken);

        const axiosInstance = this.axios.create({withCredentials: false});    //withCredentials 禁止攜帶cookie，帶cookie在七牛上有可能出現(xiàn)跨域問(wèn)題
        let data = new FormData();
        data.append('token',this.uptoken);     //七牛需要的token
        data.append('file', file);
        axiosInstance({
            method: 'POST',
            url: 'http://up-z1.qiniu.com/',  //上傳地址，華北的空間是up-z1.qiniu.com
            data: data,
            timeout:30000,      //超時(shí)時(shí)間，因?yàn)閳D片上傳有可能需要很久
            onUploadProgress: (e)=> {
                //imgLoadPercent 是上傳進(jìn)度，可以用來(lái)添加進(jìn)度條


                var complete = (e.loaded / e.total);

                if (complete < 1) {
                
                    this.imgLoadPercent = (complete \*100).toFixed(2)+ '%';

                }


            },
        }).then(data =>{
           console.log(data);
           this.imgLoadPercent = '100%';
        }).catch(function(err) {
            //上傳失敗
        });
    }

邏輯就是每一次上傳之前，請(qǐng)求一次后臺(tái)django的接口獲取token，需要注意一點(diǎn)，在實(shí)際操作中，onUploadProgress這個(gè)方法并不能完全的真實(shí)展示上傳進(jìn)度，受限于網(wǎng)絡(luò)或者別的因素導(dǎo)致它會(huì)有一定的提前量或者延遲，所以我們?cè)谶@個(gè)方法內(nèi)做了一個(gè)類(lèi)似安慰劑按鈕的效果，就是人為限制它不會(huì)變?yōu)?00%，只有當(dāng)七牛云返回結(jié)果的時(shí)候再賦值為100%。

最后，如果上傳成功后，七牛云接口會(huì)返回文件的key

image

通過(guò)url即可訪問(wèn)。

原文轉(zhuǎn)載自「劉悅的技術(shù)博客」 https://v3u.cn/a_id_130