踩坑记之基于Vue+Element+Koa实现云上存储

前言

注册并使用七牛云

1. 准备工作
注册后进行实名认证，通过后可以获得AccessKey以及SecretKey，主要是后面调用接口的时候需要使用。

2.创建存储空间
点击”管理控制台”——> “对象存储”——>”新建存储空间”，并且填入对应的信息。

如果你希望用户在任何情况下都可以直接访问资源，可以直接将空间设为公开。

3.个人中心-秘钥查看

详细步骤可以参考七牛云官网

https://developer.qiniu.com/kodo/manual/1233/console-quickstart

4.下载七牛云引入到项目中

前端引用

npm install qiniu-js    

import * as qiniu from "qiniu-js";  //在文件中引用

服务端引用

创建qiniu.js文件

const Router = require('koa-router')const qiniu = require('qiniu')let router = new Router();//获取七牛云上传tokenrouter.get('/qiniuToken',async(ctx)=>{    // ctx.body="这个是七牛"    const accessKey = 'GVqmUaM71eMgmgEfm2lWBE8C2m6y3vbaeqNBCILm'    const secretKey = 'IA_gEbsUGSm-IqMzgM9odGVrX5IsdFLAAHSEPS2j'    const bucket ='class-online'    let mac = new qiniu.auth.digest.Mac(accessKey,secretKey);    let options={        scope:bucket,        expires:3600*24    };    let putPolicy = new qiniu.rs.PutPolicy(options);    let uploadToken = putPolicy.uploadToken(mac);    ctx.body=uploadToken ? {code:200,qiniuToken:uploadToken}:{code:400}})//获取图片外链接并存入数据库router.post('/getimgurl',async(ctx)=>{    let url = ctx.request.body.imgurl;    console.log("这个是URL"+url);    })module.exports = router

index.js文件

//引入七牛云
let qiniu = require("./adminApi/qiniu")

router.use('/qiniu',qiniu.routes())

前端代码演

<template>
  <div>
    <el-upload
           class="upload-pic"
           list-type="picture"
           :action="domain"
           :data="QiniuData"
           :on-error="uploadError"
           :on-success="uploadSuccess"
           :before-upload="beforeAvatarUpload"
           :show-file-list="false"
          >
            <img v-if="imageurl" :src="imageurl" class="uploadavatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
  </div>
</template>
<script>
import url from "../../../serviceAPI.config"; //根据自己的情况而定，这个是我自己创建API集合的文件
import axios from "axios";
import * as qiniu from "qiniu-js";
export default {
 date(){
   return{
      QiniuData: {
        key: "", //图片名字处理
        token: "" //七牛云token
      },
      domain: "http://upload.qiniup.com",  //七牛云的上传地址（华东区）
      qiniuaddr: "", // 七牛云的图片外链地址
      imageurl: "", //提交到后台图片地址
      uploadPicUrl: "",
      avatar_img: ""     
          }
 },
   //加载页面时取得七牛云的Token
 mounted() {
    this.getQiniuToken();
  },
  methods:{
  //上传之前进行判断文件的格式
  beforeAvatarUpload(file) {
      const isPNG = file.type === "image/png";
      const isJPEG = file.type === "image/jpeg";
      const isJPG = file.type === "image/jpg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isPNG && !isJPEG && !isJPG) {
        this.$message.error("上传头像图片只能是 jpg、png、jpeg 格式!");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
        return false;
      }
      this.QiniuData.key = `upload_pic_${file.name}`;
    },
    uploadSuccess(response, file) {
   
      this.imageurl = URL.createObjectURL(file.raw);  //imageurl是前端显示图片的路径
      this.uploadPicUrl = `http://${this.qiniuaddr}/${response.key}`;  //uploadPicUrl是传到后端存储的
    },
    uploadError(err, file) {
      this.$message({
        message: "上传出错，请重试！",
        type: "error",
        center: true
      });
    },
    //得到七牛云的Token
    getQiniuToken() {
      axios({
        url: url.getQiniuToken,
        method: "get"
      }).then(response => {
        console.log(response);

        this.QiniuData.token = response.data.qiniuToken;
      });
     },
    //提交数据到后台
    handleSubmit() {
      axios({
        url: url.getimgurl,
        method: "post",
        data: {
          imgurl: this.uploadPicUrl,
          _id: sessionStorage.getItem("adminuser_id")
        }
      }).then(response => {
        if (response.data.code == 200) {
          let msg = response.data.message;
          this.$message.success(msg);
        }
      });
    },
   }
 };
</script>

Node后端代码

const Router = require('koa-router')
 const mongoose = require('mongoose')
 let router = new Router();

//上传生成并更新头像链接
 router.post('/getimgurl', async (ctx) => {
     let url = ctx.request.body.imgurl;
     let _id = ctx.request.body._id;

     const adminuser = mongoose.model("Adminuser")
     await adminuser.updateOne({
         _id: _id
     }, {
         $set: {
             avatar: url
         }
      }).exec().then(result=>{
         ctx.body={
            code:200, 
            message:'更新成功'
        }
    })
})

module.exports = router;

按照上面的方式基本可以实现把所需的文件上传到七牛云的对象存储之上，得到返回文件的URL，再将URL保存在数据库之中，可以极大的提高网站的性能。如果有问题可以私信或者通过个人博客沟通。