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(); // 上传取消
  }
}}
​
相关推荐
10年前端老司机2 分钟前
React 受控组件和非受控组件区别和使用场景
前端·javascript·react.js
夏晚星3 分钟前
vue实现微信聊天emoji表情
前端·javascript
停止重构5 分钟前
【方案】前端UI布局的绝技,响应式布局,多端适配
前端·网页布局·响应式布局·grid布局·网页适配多端
極光未晚5 分钟前
TypeScript在前端项目中的那些事儿:不止于类型的守护者
前端·javascript·typescript
ze_juejin6 分钟前
Vue3 + Vite + Ant Design Vue + Axios + Pinia 脚手架搭建
前端·vue.js
Rrvive7 分钟前
原型与原型链到底是什么?
javascript
lichenyang4538 分钟前
React项目(移动app)
前端
用户61848240219519 分钟前
Vue-library-start,一个基于Vite的vue组件库开发模板
前端
美团技术团队21 分钟前
报名 | 美团技术沙龙第86期:多业务场景下,美团如何做性能优化
前端
Rrvive1 小时前
localhost 和 127.0.0.1 的核心区别
前端