node.js+vue上传图片到七牛云

一、关于七牛云

原文地址

注册并实名认证为标准用户，可享受10GB的免费存储。点击注册

1.注册账号并实名认证后，登录开发者中心。

2.点击对象存储，新建存储空间，会获得一个测试的域名，但是不能配置。可以自定义自己的已备案域名，进行配置。

3.个人中心查看密钥管理，备份AK,SK备用

4.可以在内容管理查看上传的图片。

二、node.js+vue上传

1.node.js作为服务器返回上传token

这里使用的是koa框架

router.get('/token',async function(ctx, next) {
    const accessKey = config.accessKey // 你的七牛的accessKey
     const secretKey = config.secretKey // 你的七牛的secretKey
     const mac = new qiniu.auth.digest.Mac(accessKey, secretKey)
     const options = {
      scope: config.scope // 你的七牛存储对象
     }
     const putPolicy = new qiniu.rs.PutPolicy(options)
     const uploadToken = putPolicy.uploadToken(mac)
    ctx.body={
        uploadToken
    }})

2.vue使用element-ui的upload组件上传图片

//Upload.vue

<template>
    <div class="g-main"> 
       <img  :src="imageUrl" class="ablum">
        <el-upload
        class="photo-uploader"
        list-type="picture-card"
        :action= domain
        :http-request = upqiniu
        :before-upload="beforeUpload"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove">
        <i class="el-icon-plus"></i> 
        </el-upload> 
         
        <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="imageUrl" alt="">
        </el-dialog>
        
    </div>
</template>

<script>
  export default {
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false,
        imageUrl: 'http://xxxxxx.cn/4.png',
        token: {},
        // 七牛云的上传地址，根据自己所在地区选择，我这里是华东区
        domain: 'https://upload-z0.qiniup.com',
        // 这是七牛云空间的外链默认域名
        qiniuaddr: 'xxxxxxx.cn'
      };
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.imageUrl = file.url;
        this.dialogVisible = true;
      },
       // 上传文件到七牛云
    upqiniu (req) {
      console.log(req)
      const config = {
        headers: {'Content-Type': 'multipart/form-data'}
      }
      let filetype = ''
      if (req.file.type === 'image/png') {
        filetype = 'png'
      } else {
        filetype = 'jpg'
      }
      // 重命名要上传的文件
      const keyname = 'ablum'+Math.floor(Math.random() * 100) + '.' + filetype
      // 从后端获取上传凭证token
      this.axios.get('/api/api/token').then(res => {
        console.log(res)
        const formdata = new FormData()
        formdata.append('file', req.file)
        formdata.append('token', res.data.uploadToken)
        formdata.append('key', keyname)
        // 获取到凭证之后再将文件上传到七牛云空间
        this.axios.post(this.domain, formdata, config).then(res => {
          this.imageUrl = 'http://' + this.qiniuaddr + '/' + res.data.key
          console.log(this.imageUrl)
        })
      })
    },
    // 验证文件合法性
    beforeUpload (file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
    }
  }
</script>

<style>
.g-main{
  position: relative;
  height: 100vh;
  width: 100%;
}
.ablum {
    display: block;
 height: 77vh;
 width: 100%;
object-fit:cover;
}
</style>