vue+django七牛云上传图片

使用 django+vue七牛云上传文件

安装七牛云

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 = 'http://q8m7kic8f.bkt.clouddn.com/' + 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>