前端上传图片单文件到七牛云组件

图片上传流程：
1.创建七牛云存储空间
2.后台创建token
3.前端携带从后台获取的token上传图片到七牛云，成功后将返回src保存到数据库.

一、七牛云存储空间的创建需要先注册账号通过验证即可，创建好之后可以得到一对密钥

在文件管理页面得到一个外链地址

密钥是服务端用于生成token用的，外链用于前端。

二、后台创建token

这里使用的nodejs的koa框架，封装成一个接口getToken.js，在路由中使用它，当然要先安装七牛 npm install qiniu

服务端代码：

const router = require('koa-router')()
const qiniu = require('qiniu')

const accessKey = "xxx" //     前面得到的密钥
const secretKey = "xxx"
const bucket = "xxx" //空间名

router.get('/', async (ctx) => {
  let mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
  let options = {
      scope: bucket,
      expires: 3600 * 2 //token过期时间2小时
  };
  let putPolicy = new qiniu.rs.PutPolicy(options);
  let uploadToken = putPolicy.uploadToken(mac);

  if (uploadToken) {
      ctx.body = uploadToken
  } else {
      ctx.body = 'err'
  }
  
})


module.exports=router

前端代码也封装成了一个组件，因为需要新建和修改都使用同一个父组件，所以当不是新建时，父组件要传值给子组件，注意不要将props传值直接赋值给src属性，因为重传需要重新赋值，直接改props传值会有警告。

前端代码，uploadimage.js：

<template>
  <div class="upload">
    <el-upload class="avatar-uploader" 
      :action="upload" 
      :data="qiniuData"
      :show-file-list="false" 
      :headers="getAuthHeaders()" 
      :before-upload="beforeUpload"
      :on-success="handleSuccess">
      <img v-if="icon" :src="icon ? icon : imgUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </div>
</template>

<script>
export default {
  props:{
    icon:{type:String}
  },
  data() {
    return {
      imageUrl:'',  //传给后台的src
      upload:'https://upload-z1.qiniup.com', //七牛云的上传地址(华北)
      qiniuData:{
        key:'', //图片名字处理
        token:''
      },
      qiniuAddr:'http://xxx.clouddn.com' //七牛云的图片外链地址
    };
  },
  mounted(){
    this.getQiniuToken()
  },
  methods: {
    handleSuccess(res) {
      this.imageUrl = `${this.qiniuAddr}/${res.key}`;
      this.$emit('getFromChild',this.imageUrl)
    },
    beforeUpload(file) {
      
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2; 
      if (!isJPG) { 
        this.$message.error('上传头像图片只能是 JPG 格式!'); 
      } if (!isLt2M) { 
        this.$message.error('上传头像图片大小不能超过 2MB!'); 
      }
      this.qiniuData.key = `upload_pic_${file.name}`

      return isJPG && isLt2M;   
    } ,
    async getQiniuToken(){
      const res=await this.$http.get('/uploadToken')
      this.qiniuData.token = res.data
    }

  }
}
</script>

前端代码，父组件部分代码：

<el-form-item label="图标">
   <uploadImage @getFromChild="getValue" :icon="model.icon"></uploadImage>
</el-form-item>

保存到数据库，另行请求接口这里不涉及。

参考：
七牛SDK官方
elementui