vue2纯前端生成七牛云token上传文件

vue2纯前端生成token 使用七牛上传文件【不推荐，但是方便测试】

vue-cli脚手架搭建的 vue2.7.8 + webpack项目

// 前端模拟后台Node.js SDK

const qiniu = require('qiniu')

// 创建上传凭证

const accessKey = '...'

const secretKey = '...

const mac = new qiniu.auth.digest.Mac(accessKey, secretKey)

const options = {

scope: 'hlg-share-file',

expires: 7200

}

const putPolicy = new qiniu.rs.PutPolicy(options)

export const uploadToken = putPolicy.uploadToken(mac)

安装 "qiniu": "^7.2.2" qiniu插件内核是对应的node.js sdk

安装 node-polyfill-webpack-plugin 解决 直接引用const qiniu = require('qiniu')报错问题

yarn add node-polyfill-webpack-plugin

vue.config.js配置

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

module.exports = defineConfig({

......

// 在Webpack中填充Node.js核心模块。此模块仅用于Webpack 5+。

config.plugins.push(new NodePolyfillPlugin())

// 屏蔽node内置fs,child_process模块

config.resolve.fallback = {

fs: false,

child_process: false

  }

})

上传代码[key拼接直接决定目录位置，默认根目录]

// 上传设置

const config = {

headers: { 'Content-Type': 'multipart/form-data' }

}

// 重命名

const keyname = `excel-${new Date().getTime()}-${file.name}`

// 前端直接生成上传凭证token

const formdata = new FormData()

formdata.append('file', file)

formdata.append('token', uploadToken)

formdata.append('key', keyname)

// 获取到凭证之后再将文件上传到七牛云空间

axios

.post('https://upload-z2.qiniup.com', formdata, config)

    .then((res) => {

this.imageUrl = 'http://' + 外链域名+ '/' + res.data.key

      })

完成

前端模拟算法生成Token，间接性出现401 badToken

import CryptoJS from 'crypto-js'

import dayjs from 'dayjs'

// 前端模拟算法生成token

const accessKey = ''

const secretKey = ''

const bucket = ''

let timestamp = dayjs().unix() + 3600 // 当前的时间戳 授权1小时

let putPolicy = { scope: bucket, deadline: timestamp }

let encodedPutPolicy = CryptoJS.enc.Base64.stringify(CryptoJS.enc.Utf8.parse(JSON.stringify(putPolicy)))

let encodedSign = CryptoJS.enc.Base64.stringify(CryptoJS.HmacSHA1(encodedPutPolicy, secretKey)) // 第一个参数为加密字符串，第二个参数为公共秘钥

const getUploadToken = function () {

return accessKey + ':' + encodedSign + ':' + encodedPutPolicy

}

export { getUploadToken }