七牛云配置 && koa 上传文件到七牛云

一、七牛云配置

七牛官网

1、创建七牛存储空间

2、空间添加备案的域名 （若是测试空间可不需要配置）

3、解析CNAME

添加域名后会有CNAME（别名记录），需要将它解析到你的备案域名下
链接-CNAME 解析到备案域名 官网

1）在哪里购买的域名就购买域名的厂商相应管理控制台，添加域名解析。

tip:
在域名厂商的控制台中，找到您的域名解析添加页面，例如：
a. 阿里云：在控制台页面的左侧，产品与服务栏中选择 域名。
b. 腾讯云：在控制台的云产品中，搜索并选择 云解析。
c. DNSPOD：在控制台页面左侧，选择 域名。
阿里云 官网

a)进入域名官网找到对应的域名

b）添加CNAME记录

tip: 不同类型域名的主机记录值
常见的普通域名主机记录填写方式举例：
创建的加速域名 域名类型 主机记录
qiniu.com 普通域名 @
www.qiniu.com 普通域名 www
cdn.qiniu.com 普通域名 cdn
video.cdn.qiniu.com 普通域名 video.cdn

常见的泛域名主机记录填写方式举例：
创建的加速域名 域名类型 主机记录
.qiniu.com 泛域名 *
.cdn.qiniu.com 泛域名 *.cdn

c）查看是否正确配置

（若没有正确配置 CNAME 解析，是无法正常访问资源外链的）
1）linux/mac系统您可以通过如图所示的命令 dig 您的加速域名 查看，第一条是否解析到您配置的CNAME值。

2）windows系统可以通过Win+R 或 点击左下角的“开始”按钮打开“开始”菜单，打开“运行”，输入cmd回车。
在命令行模式下输入nslookup 您的加速域名，例如 nslookup qn.vinchi.club,在结果中可以看到您复制的cname值即可。

4、添加文件访问域名 （就是已经备案好七牛空间已添加的域名）

绑定成功后，在文件管理中即可查看选择

可查看上传文件信息

5、测试空间不需要配置域名即可使用（但是是有期限的）

二、koa 上传文件到七牛云

1、获取七牛配置信息

七牛官网

  # qiniuConfig.js 文件

let QINIU  = {};
QINIU.accessKey = 'XXXXX'; //七牛的accessKey
QINIU.secretKey = 'XXXXX'; //七牛的secretKey
QINIU.bucket = 'menglove-qn';  //存储空间的名字
QINIU.origin = 'menglove.xyz';  //配置的域名
module.exports = QINIU;

2、安装

$ npm install --save koa-qiniu 

3、上传的文件处理（upload.js 【service 模块】）

const uuid = require('uuid');
const fs = require('fs');
const qiniu = require('qiniu'); // 需要加载qiniu模块的
const qiniuConfig = require('../.././config/qiniuConfig');  // 七牛的配置信息

class uploadService {
    uploadToQiniu(filePath, key) {
         const accessKey = qiniuConfig.accessKey 
         const secretKey = qiniuConfig.secretKey
         const mac = new qiniu.auth.digest.Mac(accessKey, secretKey)
         const options = {
             scope: qiniuConfig.bucket
         }
         const putPolicy = new qiniu.rs.PutPolicy(options);
         const uploadToken = putPolicy.uploadToken(mac);
         // zone 华东机房  zone1 华北机房  zone2 华南机房   zoneNa0 北美
         const config = new qiniu.conf.Config()
         config.zone = qiniu.zone.zone2
         
         const localFile = filePath
         const formUploader = new qiniu.form_up.FormUploader(config)
         const putExtra = new qiniu.form_up.PutExtra()
         // 文件上传
         return new Promise((resolved, reject) => {
             formUploader.putStream(uploadToken, key, localFile, putExtra, function (respErr, respBody, respInfo) {
                 if (respErr) {
                     reject(respErr)
                 } else {
                    //  返回的是key:文件名和hash:文件信息
                    // "hash": "XXX",
                    // "key": "public/b59b7a70-d686-11ec-bed9-1fde74428146.jpg"
                     resolved(respBody)
                 }
             })
         })
    }
}

module.exports = new uploadService();

4、上传文件时对文件信息处理 （ upload.js 【controller 模块】）

const uuid = require('uuid');
const fs = require('fs');
const { uploadToQiniu } = require('../service/upload');  // 七牛上传文件处理
const qiniuConfig = require('../.././config/qiniuConfig'); // 七牛的配置信息
const { responseSuccess,responseFail } = require('./response');  // 返回处理的封装

class UploadController {
    async upload(ctx) {
        let params = ctx.request.body; // 获取formData文本信息
        let files = ctx.request.files; // 获取formData文件信息
        if(files){
            const file = files.file; // 获取formData文件信息
            // 文件名
            const fileName = uuid.v1();
            // 创建文件可读流
            const reader = fs.createReadStream(file.filepath);
            // 获取上传文件扩展名
            const ext = file.originalFilename.split(".").pop();
            // 命名文件以及拓展名
            const fileUrl = `public/${fileName}.${ext}`;
            //  上传文件到七牛并返回七牛文件目录
            const result = await uploadToQiniu(reader, fileUrl);
            if(result){
                let imageUrl = `http:${qiniuConfig.origin}/${result.key}`; // 获取上传文件 使用 （七牛配置域名+imgUrl）
                let data = { imageUrl }
                ctx.body = responseSuccess(data,'上传成功');
            }else{
                ctx.body = responseFail('上传失败');
            }
        }else{
            ctx.body = responseFail('请选择图片');
        } 
    }
}

module.exports = new UploadController();

5、路由 （router 模块）

const Router = require('koa-router')
const {
    upload,
} = require('../controller/upload');

let router = new Router()

// 上传图片
/**
 * @swagger
 * /uploadImg:
 *   post:
 *     description: 图片上传
 *     tags: [图片上传]
 *     produces:
 *       - application/json
 *     parameters:
 *       - name: file
 *         description: 图片文件.
 *         in: formData
 *         required: true
 *         type: file
 *     responses:
 *       200:
 *         description: 上传成功
 *         schema:
 *           type: object
 *           $ref: '#/definitions/uploadImg'
 *   
 */
 
 /**
 * @swagger
 * definitions:
 *   uploadImg:
 *     properties:
 *       data:
 *         type: object
 *         properties:
 *            imageUrl:
 *              type: string
 *              example: 'http://menglove.xyz/public/0f304580-d5c8-11ec-aebd-3f21817ff8d1.jpg' 
 *              description: 图片地址  (menglove.xyz为七牛域名)
 * 
 */

router.post('/uploadImg', upload)

module.exports = router

6、返回状态封装（controller 文件 response文件夹的index.js）

class ResponseController {
    // 成功返回
    responseSuccess (data,msg){
      return {
        code: 200,
        message: msg || '获取成功',
        data: data || null
       }
    }
    // 失败返回
    responseFail (msg){
        let message = msg || '获取失败';
            return {
                code: 500,
                message
            }
    }
}

module.exports = new ResponseController();