1、安装JDK

npm i qiniu

2、utils中创建qiniu.js

// 七牛云配置文件
const qiniu = require('qiniu');
 
// 创建上传凭证（accessKey 和 secretKey在七牛云个人中心中有，blog 是七牛云创建的空间名称）
const accessKey = 'xxxxxxx'; // ak密钥
const secretKey = 'xxxx'; // 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
};

3、将接口暴露给前端

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

4、前端调用获取token和上传的接口

// 获取七牛云token
export function getQiniuToken(params) {
  return request({
    url: '/getQiniuToken',
    method: 'get',
    params
  });
}
 
 
 
 
// 上传文件
export function uploadFile(data) {
  return request({
    url: import.meta.env.VITE_APP_FILE_UPLOAD_API, // 七牛云上传地址 目前我用的华南地区为(https://upload-z2.qiniup.com)
    method: 'post',
    headers: { 'Content-Type': 'multipart/form-data' },
    data
  });
}
 
//前端调用接口
const httpRequestFun = async (req) => {
  const { data } = await getQiniuToken();
  const formData = new FormData();
  const fileName = `daily-photos/${moment(new Date()).format('YYYYMMDD')}/${req.file.name}`; // /代表目录
  formData.append('file', req.file);
  formData.append('token', data); // 获取到的七牛云token
  // formData.append('key', fileName);  // 文件名称
  formData.append('key', names);  // 文件名称
  const res = await uploadFile(formData);
  console.log(res);
  console.log("在七牛云上自定义域名" + '/' + res.data.key); // 预览地址
};