nodejs结合七牛云上传文件

后台配置文件

创建文件utils/qiniu.js

安装依赖包

npm i qiniu

// 七牛云配置文件
const qiniu = require('qiniu');
 
// 创建上传凭证（accessKey 和 secretKey在七牛云个人中心中有，blog 是七牛云创建的空间名称）
const accessKey = 'ak密钥'; // ak密钥
const secretKey = 'sk密钥'; // sk密钥
const mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
const options = {
  scope: 'blog' // 存储空间的名字
};
const putPolicy = new qiniu.rs.PutPolicy(options);
const uploadToken = putPolicy.uploadToken(mac);
 
module.exports = {
  uploadToken // 导出的是七牛云生成的token
};

编写后台接口给前端获取七牛云返回的token

// 前端获取到七牛云返回的token
const express = require('express');
//  定义路由级中间件
const router = express.Router();
const {uploadToken} = require('../utils/qiniu')
 
router.get('/getQiniuToken', (req, res) => {
  res.json({
    code: 200,
    data: {
        token:uploadToken,
    },
    messages: '获取成功'
  });
});
 
module.exports = router;

七牛云上传文件前端代码

安装依赖包

npm i [email protected]

七牛云ip地址获取

• 七牛云控制台 -空间管理 - 外链域名

七牛云上传方法

qiniu.upload(file: File, key: string, token: string, putExtra?: object, config?: object): observable

• file : File 对象，上传的文件
• key : 文件资源名，为空字符串时则文件资源名也为空，为 null 或者 undefined 时则自动使用文件的 hash 作为文件名
• token: 上传验证信息，前端通过接口请求后端获得
• config : object，其中的每一项都为可选
• putExtra : object，其中的每一项都为可选

qiniu.region: object

• qiniu.region.z0: 代表华东区域
• qiniu.region.z1: 代表华北区域
• qiniu.region.z2: 代表华南区域
• qiniu.region.na0: 代表北美区域
• qiniu.region.as0: 代表新加坡区域

//前端代码
import * as qiniu from "qiniu-js";
​
const qiniuToken = ref("");
const config = {
  useCdnDomain: true,
  region: qiniu.region.z2
};
​
const putExtra = {
    //...
};
​
const observer = {
  next(res) {},
  error(err) {},
  complete(res) {
    //获取开发环境地址(七牛云ip地址)
    const url = `http://XXX.com/${res.key}`;
    console.log('完整图片访问地址',url)
  }
};
​
//选择文件上传
const onChange = async (fileList) => {
  if (fileList && fileList.length) {
   //获取七牛云token
    const { data } = await getQiniuToken();
    qiniuToken.value = data.token;
    const file = fileList[0];
    const key = `${dayjs().format("YYYYMMDDHHmmss")}_${file.name}`;
    const observable = qiniu.upload(
      file,
      key,
      qiniuToken.value,
      putExtra,
      config
    );
    const subscription = observable.subscribe(observer);
    // subscription.unsubscribe(); // 上传取消
  }
}}
​