前端上传图片到牛七云(vue+eleUI+node)

前端上传图片到牛七云对象存储

网上找了半天资料，感觉有点坑，还是自己记录一下吧！

---

主要步骤

• 注册牛七账号-实名认证-创建对象存储空间-绑定域名
  • 绑定域名可以使用默认的，建议使用自己从未使用过的二级域名；
  • 这些都不是主题看看就好；
• 使用node生成上传需要的token，（也可以后端人员生成java等等都行）
  • 需要Ak,Sk（秘钥管理查看），空间名称，自己在牛七找
• 前端发送ajax请求获取服务端生成的token，然后上传图片
  • 上传图片需要把token带上，文件名带上(建议以当前时间戳+文件名，命名)
  • 上传成功，牛七返回key就是文件名，使用你的牛七域名+key就是图片的地址；

核心代码

生成token

安装牛七模块，代码可复制，改下配置的秘钥和空间名即可；后端路由注意自己配置

let qiniu = require('qiniu'); // 需要加载qiniu模块的
let config = {
  "AK":"你的AK",
  "SK":"你的SK",
  "Bucket":"你的空间名"
}

router.post('/token', async(req,res)=> {
  let mac = new qiniu.auth.digest.Mac(config.AK, config.SK);
  let code = '1',msg = '', data = {};
  let options = {
      scope: config.Bucket,
      expires: 3600 * 24
  };
  let putPolicy =  new qiniu.rs.PutPolicy(options);
  let uploadToken= putPolicy.uploadToken(mac);
  if (uploadToken) {
      code = '0';
      data.uploadToken = uploadToken;
      res.json({code,data,msg})
  } else {
      res.json({code,data,msg})
  }
})

前端element代码

这个只是把图片上传的牛七而已，可以拿到返回的key获取到上传图片的地址
若需要其他的业务逻辑如上传头像等等，自己写

<template>
  <div>
    <el-upload
      style='position: relative;top: 10px;height: 120px;'
      :file-list='fileList'
      class="avatar-uploader"
      :limit='1'
      :action="uploadUrl"
      accept="image/jpeg,image/gif,image/png,image/bmp"
      list-type="picture-card"
      :data='uploadData'
      :on-success="handleAvatarSuccess"
      :on-error="uploadError"
      :before-upload="beforeAvatarUpload"
      :on-preview="doLookImg"
      :on-remove="doDeleteImg">
      <i class="el-icon-plus"></i>
    </el-upload>
  </div>
</template>

<script>
  export default {
    data() {
      return {
          uploadUrl: 'http://up-z2.qiniu.com',     上传的域名，在牛七查看，不同地区域名不同
          uploadData: {key:'',token:''},			后端发来的token
          formAdd: { brandLogo: '' }
      }
    },
    mounted() {
      this.getQiniuToken()
  },
    methods: {
      getQiniuToken(){
        this.$axios.$post('/api/art/token',{})				请求接口自己写后端接口
        .then(res=>{
          this.uploadData.token = res.data.uploadToken
        })
      },
      doDeleteImg(file, fileList) {
        console.log('删除成功',file, fileList)
        let logoAry;
        let key;
        if (this.editState) {
          logoAry = this.mainInfo.brandLogo.split('/');
        } else {
          logoAry = this.formAdd.brandLogo.split('/');
        }
        key = logoAry[logoAry.length - 1];
        deleteQiniuImg({key}).then(res=> {
          if (res.code === '0') {
            if (this.editState) {
              this.mainInfo.brandLogo = '';
            } else {
              this.formAdd.brandLogo = '';
            }
          } else {
            this.$message.error(res.msg)
          }
        })
      },
      doLookImg() {
        this.uploadDialogVisible = true;
        this.uploadDialogImg = this.editState ? this.mainInfo.brandLogo : this.formAdd.brandLogo;
      },
      handleAvatarSuccess(res, file, fileList) {
        console.log('上传成功', res,file, fileList)
        let hash = res.hash;
        let key = res.key;
        if (this.editState) {
          this.mainInfo.brandLogo = qiniuConfig.qiniuPath + '/' + key;
        } else {
          this.formAdd.brandLogo = qiniuConfig.qiniuPath + '/' + key;
        }
      },
      beforeAvatarUpload(file) {
        console.log(file, 'beforeAvatarUpload')
        const isPNG = file.type === "image/png";
        const isJPEG = file.type === "image/jpeg";
        const isJPG = file.type === "image/jpg";
        const isLt5M = file.size / 1024 / 1024 < 5;
        if (!isPNG && !isJPEG && !isJPG) {
          this.$message.error("上传头像图片只能是 jpg、png、jpeg 格式!");
          return false;
        }
        if (!isLt5M) {
          this.$message.error("上传头像图片大小不能超过 5MB!");
          return false;
        }
        this.uploadData.key = `upload_pic_${new Date().getTime()}_${file.name}`;
      },
      uploadError(err, file, fileList) {
        this.$message({
          message: "上传出错，请重试！",
          type: "error",
          center: true
        });
      },
    }
}
</script>