90.上传文件到七牛云

[webVueBlog]

1.去官网注册账号

官网：https://www.qiniu.com/

2.去实名认证信息

https://portal.qiniu.com/user/profile

填写实名认证信息

3.创建 AccessKey/SecretKey

这里可以创建多个，也可以停用，停用了后可以进行删除。

SK后面显示按钮可以点击查看具体值。

AK可以直接复制。

AccessKey/SecretKey后面上传文件需要用到

4.创建存储空间

官网教程：https://developer.qiniu.com/kodo/1233/console-quickstart

1.来到空间管理：https://portal.qiniu.com/kodo/bucket

2.点击新建空间

要知道这里存储区域对于的地域简称如下：

后面上传文件需要使用这个地域简称。

3.先不去自定义域名，点击好的，我知道了

我们先来上传一些图片看看：先找到刚刚自己创建的空间名称那条数据，然后点击后面的文件选项。

4.绑定域名

点击上图中的域名管理选项：然后点击添加。

一般建议不要直接添加你的备案域名。建议添加例如：cdn.备案域名 或者 img.备案域名

添加成功后会来到【CDN】->【域名管理】

当状态变为成功了我们就要去设置CNAME了。

5.设置CNAME

官网教程：https://developer.qiniu.com/fusion/kb/1322/how-to-configure-cname-domain-name

来到阿里云域名控制台并添加

添加成功后显示已配置

然后来到对象存储下的空间管理就能看到配置的域名了。

这个空间域名上传文件也是需要用到的。

这个时候我们就把需要上传的所有参数申请到了：

accessKey：

secretKey：

bucket：blog-image-me  空间名称

cdn： http://image.nevergiveupt.top/ 用来返回文件访问路径

zone：Zone_z2 华南地区

新建utils控制器：

app/controller/utils.js

const Controller = require("egg").Controller;

class UtilsController extends Controller {
 async uploadFiles() {
   const {
     ctx,
     service
   } = this;
   const data = await service.utils.uploadFiles();
   if (data) {
     ctx.body = data;
   } else {
     ctx.body = {
       message: "上传失败",
     };
   }
 }
}

module.exports = UtilsController; 

新建utils服务：

app/service/utils.js

需要安装几个插件：

npm install md5 qiniu --save

把我们准备好的参数：放到config.user.js中。

module.exports = {
   userName: "admin",
   baseRouter: "/api/v1",
   // 七牛云配置
   bucket: "blog-image-me", //要上传的空间名
   cdn: "http://image.nevergiveupt.top/", // 空间绑定的域名
   accessKey: "", //Access Key
   secretKey: "", //Secret Key
}; 

const path = require("path");
const qiniu = require("qiniu");
const md5 = require("md5");
const Service = require("egg").Service;

class UtilsService extends Service {
 constructor(ctx) {
   super(ctx);
 }
 async uploadFiles() {
   const { ctx, app } = this;

   const mac = new qiniu.auth.digest.Mac(
     app.config.accessKey,
     app.config.secretKey
   );
   const config = new qiniu.conf.Config();
   config.zone = qiniu.zone.Zone_z2;
   const options = {
     scope: app.config.bucket,
     expires: 7200,
     force: true,
     callbackBodyType: "application/json",
   };

   const putPolicy = new qiniu.rs.PutPolicy(options);
   const uploadToken = putPolicy.uploadToken(mac);
   const timestamp = new Date().getTime(); // 当前时间戳
   const randomNum = Math.ceil(Math.random() * 1000); // 取1000以下的随机数

   try {
     // const stream = await ctx.getFileStream(); // 上传单个文件 文件不存在将响应400错误
     const parts = this.ctx.multipart({ autoFields: true });
     let stream;
     const files = [];
     while ((stream = await parts()) != null) {
       const extname = path.extname(stream.filename).toLocaleLowerCase();
       const filename =
         md5(path.basename(stream.filename, extname) + timestamp + randomNum) +
         extname;
       const formUploader = new qiniu.form_up.FormUploader(config);
       const putExtra = new qiniu.form_up.PutExtra();

       const result = await new Promise((resolve, reject) => {
         formUploader.putStream(
           uploadToken,
           filename,
           stream,
           putExtra,
           (respErr, respBody, respInfo) => {
             if (respErr) {
               throw respErr;
             }
             if (respInfo.statusCode == 200) {
               resolve(respBody);
             } else {
               reject(respBody);
             }
           }
         );
       });
       if (result !== "") {
         const data = {
           ...result,
           url: app.config.cdn + result.key,
         };
         files.push(data);
       }
     }
     return files;
   } catch (err) {
     return false;
   }
 }
}

module.exports = UtilsService;