本文个人博客地址:https://www.leafage.top/posts/detail/21414BX0U
leafage-ms项目写了很久了,但是一直没有完成上传文件的功能,之前看了几次七牛云的文档,折腾了几次,没有成功,今天下了决心必须解决这个问题就又开始了各种找资料,看文档,看示例,终于搞定了。
项目中使用的是vite.js构建的,而且用的是typescript,网上的示例几乎没有,下面来一步步记录如何实现,七牛云的示例代码直接访问是无法访问的,这里就不挂地址了,直接看过程。
首先安装qiniu-js和crypto-js两个依赖,qiniu-js就是上传,crypto-js(记的添加.d.ts支持)是生成token时需要加密用的工具,安装命令如下:
yarn add crypto-js qiniu-js -D
在工具/插件目录下新建upload.ts文件,参照官方文档来写上传方法,加密、生成token的方法,首先是上传方法,最终代码如下:
import * as qiniu from 'qiniu-js';
import CryptoJS from 'crypto-js'
// 请求接口上传图片
export function uploadFile(file: File) {
const uptoken = getToken("ss", "xx", "xx");
const key = file.name;
const config = {
useCdnDomain: true,
region: qiniu.region.z2,
forceDirect: true // 是否上传全部采用直传方式
};
const putExtra: any = {
fname: file.name, //文件原文件名
mimeType: ['image/png', 'image/jpeg', 'image/gif'] //用来限制上传文件类型,为 null 时表示不对文件类型限制;
};
return qiniu.upload(file, key, uptoken, putExtra, config);
}
注意这里最终返回的是upload()的执行结果,是一个对象,里面有next, error, complete,这里不处理过程和结果,直接返回,在使用的地方进行处理。
uploadFile()方法需要暴露出去,供组件中使用
其中getToken()方法的三个参数分别是:accessKey、secretKey、bucketName,需要登录自己的七牛云账号查看,具体操作登陆后,点击头像,然后点击密钥管理,就能看到了,getToken()方法最终代码如下:
function getToken(access_key: string, secret_key: string, bucketname: string) {
// 构造策略
var putPolicy = {
"scope": bucketname,
"deadline": 3600 + Math.floor(Date.now() / 1000)
}
var encoded = base64Encode(utf16to8(JSON.stringify(putPolicy)));
var hash = CryptoJS.HmacSHA1