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(); // 上传取消
  }
}}
​
相关推荐
excel3 小时前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着3 小时前
全栈框架next.js入手指南
前端·next.js
你的人类朋友5 小时前
什么是API签名?
前端·后端·安全
会豪7 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子7 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶7 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子7 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_7 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
Gracemark7 小时前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
小徐_23338 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts