七牛云上传图片

31次阅读

共计 4248 个字符,预计需要花费 11 分钟才能阅读完成。

前言

上传图片是很常见的需求,方法也有很多。本次使用的是七牛云的对象存储,七牛云的 oss 做的还是比较出色的。

七牛云的上传大体分为两种

  • 向服务端请求七牛的文件上传 token,然后将文件上传至七牛(授权式上传)
  • 将文件直接上传到服务端,再由服务端将文件传输至七牛

授权式上传其实还分两种,一种是调用 qiniu SDK,一种直接调用七牛的上传接口

本文会把两种方法都实现,实际开发根据情况选用

使用技术

formData + axios + koa + koa-body

授权式上传

这种上传方式,后端只需要返回七牛的 token,由前端调用 SDK 或者 上传接口

SDK 上传

七牛云的 sdk 可以通过 script 标签引入

https://unpkg.com/qiniu-js@2.4.0/dist/qiniu.min.js
  • 通过 sctipt 标签引入该文件,会在全局生成名为 qiniu 的对象
  • 通过 npm 安装

    npm install qiniu-js --save
    import * as qiniu from 'qiniu-js'

qiniu-sdk

主要 api,qiniu.upload(file, key, token, putExtra, config)

  • file:Blob 对象
  • key:文件名
  • token:上传验证信息,前端通过接口请求后端获得
  • config:上传配置参数
  • putExtra:额外配置参数

调用成功后返回一个 observable 对象,调用它的 subscribe 方法获取到响应结果

observable.subscribe({complete(res) {// 上传完成的响应信息,res 包含 hash、key 两个属性(默认)},
  next(res) {// 接收上传进度信息,res 包含 loaded、total、percent 三个属性,提供上传进度信息。},
  error(err) {// 上传错误触发,err 包含 code、message、isRequestError 三个属性}
});

前端代码:发送请求使用 axios

<input type="file" id="upload" accept="image/*" />
const fileInput = document.getElementById('upload');
fileInput.addEventListener('change', async function(e) {const file = e.target.files[0]; // Blob,文件流对象
  // 通过后端接口获取七牛云的 token
  const res = await axios.get('/qiniuToken');
  const {token, key} = res.data;
  const putExtra = {
    fname: '', // 文件原文件名
    params: {}, // 用来放置自定义变量
    mimeType: null // 用来限制上传文件类型,为 null 时表示不对文件类型限制;eg: ["image/png", "image/jpeg"]
  };
  const config = {
    useCdnDomain: true, // 开启 cdn 加速域名
    region: null, // 为 null 会自动解析上传区域
  };
  // 调用 qiniu.upload 上传图片,生成 observable 实例
  const observable = qiniu.upload(file, key, token, putExtra, config);
  // 调用 observable 的 subscribe 方法,获取响应结果
  observable.subscribe({complete(data) {const { key} = data;
      // 把返回的 key 与 域名拼接,就是图片地址
      const url = '配置的域名' + key;
    },
    next(res) {// ...},
    error(err) {// ...}
  });
});

API 上传

首先拿到 token,然后调用上传的 api,不同的空间区域对应不同的接口地址,我的空间是华南区域,接口地址:http://upload-z2.qiniu.com

const fileInput = document.getElementById('upload');
fileInput.addEventListener('change', async function(e) {const file = e.target.files[0]; // Blob,文件流对象
  // 通过后端接口获取七牛云的 token
  const res = await axios.get('/qiniuToken');
  const {token, key} = res.data;
  const formData = new FormData();
  formData.append('token', token);
  formData.append('key', key); // key:文件名,可以不传,如果不传七牛则会自动生成随机文件名 hash
  formData.append('file', file);
  const response = await axios.post('http://upload-z2.qiniu.com', formData);
  const url = '七牛云仓库配置的域名' + response.key;
});

上面的两种上传方式,后端需要返回 token

后端代码:后端实现使用 koa

因为只需要返回 token,所以相对简单

const qiniu = require('qiniu')

router.get('/qiniuToken', async (ctx) => {
  // accessKey,secretKey 在个人中心可以查看
  const accessKey = 'your access key';
  const secretKey = 'your secret key';
  // 鉴权对象 mac
  const mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
  const options = {scope: 'your bucket' // 仓库名};
  const putPolicy = new qiniu.rs.PutPolicy(options);
  const token = putPolicy.uploadToken(mac);
  const key = +new Date() + Math.random().toString(16).slice(2); // key 只需要随机不重复就可以
  ctx.body = {status: 1, data: { token, key} };
});

后端直传

前端只需要传递一个 file 文件流对象

fileInput.addEventListener('change', async function(e) {const file = e.target.files[0]; // Blob,文件流对象
  const formData = new FormData();
  formData.append('file', formData); // file 是后端接受的字段
  // axios 识别到参数为 formData 类型后,会自动修改 Content-Type 为 multipart/form-data
  const res = await axios.post('/qiniu', formData);
  const {url} = res.data;
});

后端需要调用 qiniu-sdk

先下载 koa-body

npm i -S koa-body
const koaBody = require('koa-body');
const koaBodyOpts = {
  multipart: true, // 默认不会接受 formData 参数,需要开启
  formLimit: '15mb' // 默认 56 kb,尽量设置大一些
};
// 在全局使用 koa-body
app.use(koaBody(koaBodyOpts));

// 在某个路由使用
router.post('/qiniu', koaBody(koaBodyOpts), async (ctx) => {const { file} = ctx.request.body.files;
  const ext = path.extname(file.name);
  const fileName = +new Date() + ext;
  const localFile = file.path;
  try {const res = await qiniuPut(fileName, localFile);
    const url = qiniuOpts.url + res.key;
    ctx.body = {status: 1, data: { url} };
  } catch (e) {console.log(e);
    ctx.body = {status: 0, msg: '上传失败'};
  }
});

// 获取七牛云 token
const qiniuToken = () => {
  const accessKey = 'your access key';
  const secretKey = 'your secret key';
  const mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
  const options = {scope: 'your bucket'};
  const putPolicy = new qiniu.rs.PutPolicy(options);
  const uploadToken = putPolicy.uploadToken(mac);
  return uploadToken;
};

// 七牛云文件上传
const qiniuPut = (key, localFile) => {const uploadToken = qiniuToken();
  const config = new qiniu.conf.Config();
  // 空间对应的机房
  config.zone = qiniu.zone.Zone_z2;
  const formUploader = new qiniu.form_up.FormUploader(config);
  const putExtra = new qiniu.form_up.PutExtra();
  return new Promise((resolve, reject) => {formUploader.putFile(uploadToken, key, localFile, putExtra, (respErr, respBody, respInfo) => {if (respErr) {reject(respErr);
      } else {resolve(respBody);
      }
    });
  });
}

七牛云的 api 还有很多,有兴趣可以看看文档

正文完
 0