如何上传图片到七牛云

下面介绍element-ui中upload组件如何把图片上传的七牛云(免费版本，有流量限制)

一、准备工作

1.去七牛云注册账号，并实名认证，不认证无法创建存储空间

 

 

 

2.了解element-ui组件

二、创建上传页面(这里直接使用官方的代码片段)

<template>
  <div class="editor">
    <h3>上传图片</h3>
    <el-form label-width="70px" @submit.native.prevent="save">
      <el-form-item label="图标">
        <el-upload
          class="avatar-uploader"
          :action="qiniudomain"
          :http-request="uploadtoqiniu"
          :show-file-list="false"
          :before-upload="beforeupload"
        >
          <img v-if="model.icon" :src="model.icon" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
　　  // 实名认证后创建的存储空间对应的上传地址(华东，华南等等不一样：https://developer.qiniu.com/kodo/manual/1671/region-endpoint)
      qiniudomain: "https://upload-z2.qiniup.com",
　　　// 创建成功后官方随机分配的公开图片地址前缀，即上传成功后对应的公用图片地址前缀
      qiniuviewhost: "http://q0sm6ce42.bkt.clouddn.com",
      model: {
        name: "",
        icon: ""
      }
    };
  },
  methods: {
    async uploadtoqiniu(req) {
      const config = {
        headers: { "content-type": "multipart/form-data" }
      };
      let filetype = "";
      if (req.file.type === "image/png") {
        filetype = "png";
      } else {
        filetype = "jpg";
      }
      // 重命名要上传的文件
      const keyname = `${new date().gettime()}${math.random().tostring(36).slice(2)}.${filetype}`;
      // 上传时候的token,可前端自己生成,安全起见后端生成！
　　　 // 这里是express后端生成的token
      const res = await this.$http.get("/token");
      const token = res.data.uploadtoken;
      const formdata = new formdata();
      formdata.append("file", req.file);
      formdata.append("token", token);
      formdata.append("key", keyname);
      const result = await this.$http.post(this.qiniudomain, formdata, config);
      this.model.icon = `${this.qiniuviewhost}/${result.data.key}`;
    },
    beforeupload(file) {
      // debugger
      const isjpg = file.type === "image/jpeg" || file.type === "image/png";
      const islt10m = file.size / 1024 / 1024 < 10;

      if (!isjpg) {
        this.$message({
          showclose: true,
          message: "上传图片只能是jpg/png 格式!",
          type: "error"
        });
      }
      if (!islt10m) {
        this.$message({
          showclose: true,
          message: "上传头像图片大小不能超过 10mb!",
          type: "error"
        });
      }
      return isjpg && islt10m;
    },
  },
  created() {
    // 其他ajax
  }
};
</script>

 

三、上传凭证（token）如何获得：

// 七牛云官方node.js cdk
const qiniu = require('qiniu');

const config = {
  // 个人中心->秘钥管理->accesskey
  "ak": "xxxxxx你自己的",
  // 个人中心->秘钥管理->secretkey
  "sk": "xxxxxx你自己的",
  // 对象存储->新建存储空间的名字：(你自己创建时候空间名字)，这里我创建的是：jiuchengjsfront
  "bucket": "jiuchengjsfront"
}
  // 这里是根据express定义的接口返回给客户端的:token
  app.get('/admin/api/token', async(req, res)=> {
    const mac = new qiniu.auth.digest.mac(config.ak, config.sk);
    const options = {
        scope: config.bucket,
        expires: 3600 * 24
    };
    const putpolicy =  new qiniu.rs.putpolicy(options);
    const uploadtoken= putpolicy.uploadtoken(mac);
    res.send({
      uploadtoken
    })
  })

也可以不从接口获取，自己定义成功的方法。安全起见别暴露给别人

// 七牛云官方node.js cdk
const qiniu = require('qiniu');

const config = {
  // 个人中心->秘钥管理->accesskey
  "ak": "你自己的accesskey",
  // 个人中心->秘钥管理->secretkey
  "sk": "你自己的secretkey",
  // 对象存储->新建存储空间的名字：(你自己创建时候空间名字)
  "bucket": "jiuchengjsfront"
}
// 官方文档：https://developer.qiniu.com/kodo/manual/1208/upload-token
const mac = new qiniu.auth.digest.mac(config.ak, config.sk);
const options = {
  scope: config.bucket,
  expires: 3600 * 24
};
const putpolicy = new qiniu.rs.putpolicy(options);
const uploadtoken = putpolicy.uploadtoken(mac);

export default uploadtoken

// 使用的时候替换为

　formdata.append("token", uploadtoken);

const result = await this.$http.post(this.qiniudomain, formdata, config);
this.model.icon = `${this.qiniuviewhost}/${result.data.key}`;

四、上传成功之后如：