七牛雲上傳文件 - 邱乘屹的個人技術博客

爲什麼使用七牛雲？

使用第三方提供的七牛雲是很有必要的
在項目開發過程中，如果將用戶上傳的文件，圖片，音頻等等放到項目中，將會使項目越來越臃腫，而且會嚴重影響性能。並且，如果將文件存到本地，需要進行不斷的維護，佔用空間，當出現宕機等情況，造成數據丟失，這是不能允許的
而把這些文件放到第三方雲，就不會出現這種問題，只需要通過簡單的配置，便可以永久保存，減少服務器壓力，也不用害怕因宕機出現數據丟失的情況。

如何使用

安裝第三方七牛雲

pip install qiniu

django獲取七牛雲token 代碼如下

# 定義七牛雲 存儲接口
from qiniu import Auth

class QiNiu(APIView):
    def get(self,request):
        # 定義密鑰
        q = Auth('公鑰,'私鑰')
        # 指定上傳空間
        token = q.upload_token('updateli')
        print(token)
        return Response({
            'code':200,
            'token':token
        })

上傳

這裏我編寫了一個測試項目供大家參考

<template>
  <div>
       <Form>
          <FormItem label="圖片">
              <input type="file" @change="update">
          </FormItem>
        <!--頭像-->
        <Avatar :src="img" :width="150" fit="'fill"></Avatar>
          
          
          
      </Form>
  </div>
</template>

<script>
export default {
    data(){
        return{
            name:'',
            price:'',
            img:'',
            //七牛雲上傳憑證
            uptoken:''

        }
    },
    methods: {
        
       //上傳七牛雲
       update(e){
           console.log(this.uptoken)

           //獲取文件對象
           let file = e.target.files[0];
           //聲明參數
           let param = new FormData()

           //將上傳憑證添加參數
           param.append('token',this.uptoken)

           //附加文件
           param.append('file',file)

           //定製化axios 不讓帶cokkie
           const axios_qiniu = this.axios.create({withCredentials:false});
           
           //發送請求
           axios_qiniu({
               method:'POST',
               url:'http://up-z1.qiniu.com/',
               data:param,
               timeout:3000,




           }).then(res=>{

               console.log(res)
               //進行輔助
               this.img = '在七牛雲儲存空間中綁定的域名' + res.data.key;


           })



       },



       //獲取七牛雲上傳憑證
       get_uptoken(){
           this.axios.get('http://localhost:8000/uptoken/').then((res)=>{
               console.log(res)
               this.uptoken = res.data.token

           })
       }
        
    },
    mounted() {
        //獲取uptoken
        this.get_uptoken()
    },
}
</script>

<style>

</style>