上传七牛云的方法

注册一个用户
保存密钥


新建空间默认为华南必须认证身份才行
把空间名记录下来

点击开发者中心

点击对象存储

保存地址

获取域名

后端逻辑

from qiniu import Auth

# 七牛云的密钥
AK1:"wRw1Dl-H8PAb_uAuEI2F5TDx5HSsDPktNM3zpwbo"
SK1:"Dxx2HWInPnfJj9pcTw2BbxvU1D9qonKEJHyttgqX"
AK2:"fgQoD2J8Dz-t-XL0-zXLYvROfjBLF6mJ7eDqO_wb"
SK2:"EDF6xq5NgHQMclFMaw6WOdjSxc3Yluc84d7hDRDr"
存储空间名称:"wangzhiyi1"

def gen_token():
    q = Auth(ak, sk)

    # 生成七牛的token
    token = q.upload_token(bucket='p6123', expires=3600)

    return token


# 七牛token的视图
class QiniuTokenView(APIView):
    def get(self, request):
        # 成功七牛token
        token = gen_token()
        return Response({
    
            'code': 200,
            'msg': '七牛云token生成成功',
            'token': token
        })

前端逻辑

<el-form-item label="商品图片" prop="image">
	<!-- :action="保存的地址,把（s）取掉" -->
  <el-upload :action="'http://up-z2.qiniup.com'" :on-success="uploadSuccess" :data="upload_data" :on-error="uploadError" >
    <el-button size="small" type="primary">点击选择图片</el-button>
  </el-upload>
</el-form-item>

mounted() {
    
	this.axios
        .get("v1/goods/qiniuToken/", {
    
          headers: {
    
            Authorization: "JWT " + token,
          },
          responseType: "json",
        })
        .then((dat) => {
    
          // console.log("token>>>",dat.data);
          this.upload_data.token = dat.data.token;
        })
        .catch((err) => {
    
          console.log(err.response);
        });
  },

上传成功后保存七牛云图片地址

uploadSuccess(res, files) {
    
      console.log("上传的图片响应:", res);
      this.PicturesForm.image = 'http://' + '自己的域名' + '/' + res.key

      console.log("'上传成功',>>>", this.PicturesForm.image);
    },