Flask上传图片到七牛云

 后端

# 上传图片
class Upload(Resource):
    def post(self):
        # 上传到本地
        img = request.files.get("img")
        if not img:
            return jsonify({
                "code": 400,
                "msg": "图片不存在"
            })

        filename = datetime.strftime(datetime.now(), "%Y%m%d%H%M%S")
        filename += str(random.randint(100000, 999999))
        filename += "."
        filename += img.filename.split(".")[-1]

        img.save("./static/" + filename)
        # img.save(os.path.join("static", filename))
        # 上传到七牛云
        from qiniu import Auth, put_file, etag
        # 需要填写你的 Access Key 和 Secret Key
        access_key = 'g3NoW5IUNlz4S3oxqES8CgBsq5dLXcrozgp6uU6Y'
        secret_key = 'tedsy88vJSWOo3DqdpMEkpmZD7rfZTSjpxCEmvBW'
        # 构建鉴权对象
        q = Auth(access_key, secret_key)
        # 要上传的空间
        bucket_name = 'h2202afxx'
        # 上传后保存的文件名
        key = 'static/' + filename
        # 生成上传 Token，可以指定过期时间等
        token = q.upload_token(bucket_name, key, 3600)
        # 要上传文件的本地路径
        localfile = './static/' + filename
        ret, info = put_file(token, key, localfile, version='v2')
        print(info)
        if ret['key'] == key:
            return jsonify({
                "code": 200,
                "msg": "上传图片成功",
                "data": {
                    "img": key
                }
            })
        else:
            return jsonify({
                "code": 400,
                "msg": "上传图片失败"
            })

api.add_resource(Upload, "/upload")

前端

<template>
  <div>
      <el-upload
        action="http://127.0.0.1:5000/live/img"
        name="img"
        :on-success="upload"
      >
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>
  </div>
</template>

<script>
export default {
  name: "Live",
  data() {
    return {
      img: "",
    };
  },
  props: {},

  components: {},

  created() {},

  mounted() {
    this.getData();
  },

  methods: {
    upload(resp) {
      console.log(resp);
      if (resp.code == 200) {
        alert("文件上传成功");
      }
    },
  },

  computed: {},

  watch: {},

  directives: {},

  filters: {},
};
</script>

<style scoped></style>

---

直接上传到七牛云

生成七牛云token

class UploadMp3(BaseView):
    def get(self):
        from qiniu import Auth
        access_key = current_app.config.get("QINIU_AK")
        secret_key = current_app.config.get("QINIU_SK")
        auth = Auth(access_key, secret_key)
        backet_name = "1103h2202a"
        token = auth.upload_token(backet_name, expires=3600)

        return self.success({
            "token": token
        })

api.add_resource(UploadMp3, "/upload/mp3")

前端

<div>
    <el-upload
      action="http://upload.qiniup.com"
      :data="{ token: upload_token }"
      :before-upload="getToken"
      :on-success="upload"
     >
       <el-button size="small" type="primary">点击上传</el-button>
   </el-upload>
</div>

data(){
  return{
    // 保存后的文件地址
    audio_file:"",
    upload_token:"",
  }
}

<script>
export default {
  methods:{
    async getToken(res) {
      console.log(res, "文件上传前");
      //async和await async声明此函数是异步函数 await声明等待函数处理完成。这两个单词必须成对出现
      //在这里我们去后端获取token,然后替换掉本地token
      await this.$axios.get("/upload/mp3").then((res) => {
        console.log(res);
        if (res.data.code == 20000) {
          this.upload_token = res.data.data.token;
        }
      });
    },
  upload(res) {
    console.log(res);
    if (res.key) {
      this.audio_file = res.key;
    }
  },
 }
};
</script>