vue+django图片上传七牛云

使用七牛云服务
用户在前端传入的图片，直接存入到七牛云中，并把图片链接保存到后端

逻辑 前端获取到图片 发送给后端
后端调用七牛云服务 生成图片名称 上传到七牛云
然后拿到图片外链 存入对应数据中

前端代码

前端使用了vue 加 vant2组件

<van-uploader v-model="fileList" multiple :max-count="1" preview-size="200" :after-read="afterRead">
            <img
                class="image_2"
                referrerpolicy="no-referrer"
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/pscban2cxd20gxph4xg5kw7dqbc54loinj75b2f2a3-42a1-462a-b070-0455af2bef19"
            />
</van-uploader>

自定义上传图片的图标，然后用van-uploader标签包裹起来，参数意思去看vant2文档

js代码部分

  afterRead(file) {
      // file是vant框架返回的文件对象
      this.file1 = file['file']
      // file['file']是真正的文件 保存到全局中
    },
    pay_finish() {
      if (this.file1) {
        let data1 = new FormData()
        data1.append('file', this.file1)
        data1.append('order_id', this.order_info.ordef_id)
        // 生成一个FormData()对象，然后添加文件，和参数
        this.$axios({
          url: this.$settings.BASE_URL + '/order/order/img_token/',
          method: 'POST',
          headers:{'Content-Type':'multipart/form-data'},
          // 添加请求头
          data:data1
          // 传入FormData()对象
        }).then(res=>{
          if (res.data.code==100){
            Toast.success(res.data.msg)
          }else {
             Toast.fail(res.data.msg)
          }
          

后端代码

 首先需要下载七牛云的模块 下载地址去官网看
from qiniu import Auth, put_data
  
  
在settings.py中 定义常量 存储 七牛云密钥 和 储存空间名称，以便上线后更改
# 七牛云服务配置
ACCESS_KEY = 'u19ZklyR5zWlSRoKdkp4uUYVlDv-gCHu04m1rGPP'
SECRET_KEY = '5zefidrSV9H5Cf6v0v-egNHeSLsYxEFSxxcFPwEu'
BUCKET_NAME = 'moongod'
  
  @action(methods=['POST'], detail=False)
    def img_token(self, request):
        access_key = settings.ACCESS_KEY
        secret_key = settings.SECRET_KEY
        order_id = request.data.get('order_id')
        key = request.data.get('order_id') + '.jpg'
        # key=上传到七牛云的文件名
        file = request.data.get('file')
        # 获取前端传来的文件对象
        q = Auth(access_key, secret_key)
        # 通过密钥生成一个对象
        bucket_name = settings.BUCKET_NAME
        # 获取配置的空间地址名称
        token = q.upload_token(bucket_name, key)
        # 生成token
        ret, info = put_data(token, key, file)
        # 传送文件到七牛云，file是文件对象本身
        if info.status_code == 200:
          # 判断是否上传成功，上传成功后在对应订单保存图片外链
          Order.objects.filter(ordef_id=order_id).update
  (pay_img=f'http://rrgggfiaa.bkt.clouddn.com/{key}',type=3)
          # 七牛云空间外链 前面域名都是相同的，只有文件名不同
            return MyResponse(msg='提交成功')
        else:
            return MyResponse(code=101,msg=info.text, status=400)