nodejs结合七牛云上传文件

后台配置文件

创建文件utils/qiniu.js

安装依赖包

npm i qiniu

ini 复制代码
// 七牛云配置文件
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

php 复制代码
// 前端获取到七牛云返回的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 qiniu-js@3.4.2

七牛云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: 代表新加坡区域
ini 复制代码
//前端代码
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(); // 上传取消
  }
}}
​
相关推荐
Apifox6 分钟前
如何让 Apifox 发布的在线文档具备更好的调试体验?
前端·后端·测试
咔咔一顿操作9 分钟前
【CSS 3D 交互】打造沉浸式 3D 照片墙:结合 JS 实现拖拽交互
前端·javascript·css·3d·交互·css3
0x00012 分钟前
Uniapp - 自定义 Tabbar 实现
前端·uni-app
用户4582031531714 分钟前
Flexbox布局上手:10分钟告别垂直居中难题
前端·css
牛蛙点点申请出战15 分钟前
仿微信语音 WaveView 实现
android·前端·ios
yiyesushu16 分钟前
react + next.js + ethers v6 项目实例
前端
明远湖之鱼17 分钟前
巧用 Puppeteer + Cheerio:批量生成高质量 Emoji 图片
前端·爬虫·node.js
落笔忆梦19 分钟前
利用浏览器空闲时间优化资源加载与渲染
前端·javascript
我是日安19 分钟前
Day 2 - 开发环境建置:monorepo
vue.js
艾小码20 分钟前
还在用Vue 2硬撑?升级Vue 3的避坑指南来了!
前端·javascript·vue.js