python 上传图片到七牛云上

后端，生成token

# 自己的密钥
assess_key = 'lJmRta45LtmYLB****************HHb_0M4TR-'
secret_key = 'OqrHGUXASeWdT_***************5D7aYrBWkT'
# 使用七牛云之前先下载
pip install qiniu
# 导入七牛云模块
from qiniu import Auth

#生成上传的token
class QiNiuFiles(APIView):
    def get(self, request):
        """生成上传的token"""
        q = Auth(access_key, secret_key)
        # 生成上传 Token，可以指定过期时间等
        bucket_name = "自己文件夹的名字"
        token = q.upload_token(bucket_name)
        return Response({'msg': 'OK', 'code': 200, 'qn_token': token})

前端，上传图片

action：存储区域的域名，华东-浙江2里面的    必选参数，上传的地址 
uploadSuccess：上传成功后执行的方法
auto-uploab：是否在选取文件后立即进行上传
data：上传时附带的额外参数 token
<el-form-item label="商品图片" prop="logo">
            <el-upload 
            action="https://upl********.qiniup.com"
            :on-success="uploadSuccess"
            :data="upload_data"
            :auto-uploab = true
            :on-error="uploadError"
            >
            <el-button size="small" type="primary">点击选择图片</el-button>
            <button @click="tian">添加</button>
            </el-upload>
      </el-form-item>

<img :src='item.url'> 直接

<script>
export default {

data(){
        return{
			// 外链接域名，在七牛云上获取，新建文件夹里面的域名
            baseUrl:'http://rg1********t.clouddn.com/',
			// 图片地址
			imgurl:''
            // token的变量必须要有对象括起来
            upload_data:{
            	token:''
        	}
        }
    },

methods:{
	//将图片；路径传递到后端存放数据库里面
	  tian(){
      post('tian/',{img:this.url})
      .then(resp=>{
        console.log(resp.data)
        alert(resp.data.msg)
      }).catch(err=>{
        console.log(err)
      })
    },
	//上传成功拼接图片地址
	uploadSuccess(res,files){
		console.log("imgurl>>>", this.imgUrl)
		this.imurl = this.baseUrl+res.key
	},
    
	//上传失败后的方法
    uploadError(err){
        console.log(err)
    }，

	// 获取后端的token
	get_token(){
      this.axios.get('http://127.0.0.1:8000/goods/imgs/get_token/')
      .then(dat=>{
          console.log("token>>>",dat.data);
          this.upload_data.token = dat.data.qn_token;        
      }).catch(err=>{      
         console.log(err.response);
      })
	},  
}
}
</script>

后端，储存图片路径，返回图片路径

class Imgview(APIView):
    def post(self,request):
        url = request.data.get('url')
        print('路径》》》》》',url,)
        try:
            Imgmodel.objects.create(
                url=url
            )
            return Response({'msg':'ok','code':200})
        except Exception as e:
            print(e)
            return Response({'msg':'no','code':404})

class myimg(APIView):
    def post(self,request):
        data = Imgmodel.objects.all()
        ser = myimgser(data,many=True)
        return Response({'msg':ser.data,'code':200})

前端，获取图片路径在页面渲染

<template>
<table>
  <tr v-for="(item,i) in lis1" :key="i">
    <td><img :src="item.imgurl" alt=""></td>
  </tr>
</table>
</template>
<script>
export default {
methods:{
   // 获取全部图片
    huo(){
      get('huo/')
      .then(resp=>{
        console.log('图片》》》',resp.data)
        this.lis1= resp.data.msg
      }).catch(err=>{
        console.log(err)
      })
    },
   }
 mounted(){
	this.gettoken();	
  }
}
</script>

七牛云官网