全栈06 上传图片

最新推荐文章于 2024-08-08 14:52:31 发布

「已注销」

最新推荐文章于 2024-08-08 14:52:31 发布

阅读量214

点赞数

分类专栏：全栈

本文链接：https://blog.csdn.net/duola8789/article/details/83149296

版权

全栈专栏收录该内容

7 篇文章 0 订阅

订阅专栏

使用koa2将图片上传到七牛云，七牛文件上传分为客户端上传（主要是指网页端和移动端等面向终端用户的场景）和服务端上传两种场景。这里使用的是客户端上传

安装七牛

首先安装七牛SDK

npm install qiniu -S

准备好七牛账号下有效的Access Key和Secret Key，可以通过七牛云开发者后台获取

服务器使用NodeJS SDK创建上传凭证

客户端（移动端或者Web端）上传文件的时候，需要从客户自己的业务服务器获取上传凭证，而这些上传凭证是通过服务端的SDK来生成的，然后通过客户自己的业务API分发给客户端使用。

创建各种上传凭证之前，我们需要定义好其中鉴权对象mac：

var accessKey = 'your access key';
var secretKey = 'your secret key';
var mac = new qiniu.auth.digest.Mac(accessKey, secretKey);

创建上传凭证：

var options = {
  scope: bucket,
  expires: 7200
};
var putPolicy = new qiniu.rs.PutPolicy(options);
var uploadToken=putPolicy.uploadToken(mac);

bucket就是七牛存储空间名

客户端每次上传文件时想自己的服务器请求授权即可：

export async function getUploadCertificate(ctx) {
  ctx.body = {
    success: true,
    retDsc: '获取凭证成功',
    ret: {
      uploadToken
    }
  };
}

客户端上传图片

进行上传图片：

async submitAll() {
  // 获取上传token
  const res = await this.$http.get(API.exampleAPI.upload);
  const uploadToken = res.data.ret.uploadToken;
  // 参数
  const Qiniu_UploadUrl = 'http://up-z1.qiniup.com';
  const domain = 'http://design.oldzhou.cn';
  // 通过formData上传图片
  let formData = new FormData();
  formData.append('token', uploadToken);
  formData.append('file', this.previewImages[0].file);
  this.$http.post(Qiniu_UploadUrl, formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    },
    withCredentials: false
  }).then(res = > {
      const src = `${domain}/${res.key}`
        });
      }
    },

要注意的是，在上传图片的时候，必须获取由自己服务器生成的token（也可以通过客户端来生成，有对应的SDK），并且需要将axios的headers设置为'Content-Type': 'multipart/form-data'，且需要将withCredentials设为false，来解决跨域的问题。

七牛云绑定域名

对七牛云绑定一个二级域名，用来访问上传的图片：

在存储空间pe-idea中找到域名绑定栏目点击添加，进行加速域名配置：

域名类型	默认
加速域名	design.qiniudemo.com
覆盖范围	默认（只在国内访问）
通信协议	默认（HTTP）
使用场景	默认（图片小文件）
源站配置	默认（存储空间 pe-idea）

创建成功后，1-2小时会处理完成，最多不超过12小时。这时候会得到CNAME：design.oldzhou.cn.qiniudns.com

同时需要进入到购买域名时的网站，找到域名服务中域名管理，进入oldzhou.cn一级域名，添加解析，主机记录就是二级域名，记录类型选择CNAME记录，记录值填入刚才得到的CNAME，保存后就OK了

经过一段时间的等待后，绑定CNAME成功。