本文个人博客地址：https://www.leafage.top/posts/detail/21414BX0Uleafage-ms项目写了很久，但是上传文件的功能一直没有已完成。之前看了几遍七牛云的文档，折腾了好几遍，都失败了。今天下定决心要解决这个问题，于是开始找资料，看文档，看例子，终于搞定了。该项目使用vite.js构建，并使用typescript。网上几乎没有例子。下面记录下如何一步步实现。七牛云的示例代码不能直接访问，这里就不列出地址了，直接看流程。首先安装qiniu-js和crypto-js这两个依赖，qiniu-js是上传的，crypto-js（记得加.d.ts支持）是生成token时加密的工具。安装命令如下：yarnaddcrypto-jsqiniu-js-D在tool/plug-in目录下新建upload.ts文件，参考官方文档写上传方式、加密、生成token方法。首先是上传方式。最终代码如下：import*asqiniufrom'qiniu-js';importCryptoJSfrom'crypto-js'//请求接口上传图片exportfunctionuploadFile(file:File){constuptoken=getToken("ss","xx","xx");常量键=文件名；constconfig={useCdnDomain:true,region:qiniu.region.z2,forceDirect:true//是否全部采用直传方式上传};constputExtra:any={fname:file.name,//文件的原始文件名mimeType:['image/png','image/jpeg','image/gif']//用来限制类型上传的文件，为null时表示不限制文件类型；};returnqiniu.upload(file,key,uptoken,putExtra,config);}注意，这里最终返回的是upload()的执行结果，是一个对象，包含next、error、complete。这里不处理过程和结果，直接返回，在使用的地方处理。uploadFile()方法需要暴露在组件中使用。getToken()方法的三个参数是：accessKey、secretKey、bucketName。您需要登录您的七牛云账号才能查看。登录后点击头像，再点击即可看到密钥管理，getToken()方法最终代码如下：functiongetToken(access_key:string,secret_key:string,bucketname:string){//构造policyvarputPolicy={"scope":bucketname,"deadline":3600+Math.floor(Date.now()/1000)}varencoded=base64Encode(utf16to8(JSON.stringify(putPolicy)));varhash=CryptoJS.HmacSHA1(encoded,secret_key);//构造凭证varencodedSign=hash.toString(CryptoJS.enc.Base64).replace(/\//g,'_').replace(/\+/g,'-');varuploadToken=access_key+':'+encodedSign+':'+encoded;returnuploadToken;}getToken()方法中的base64Encode()和utf16to8()方法代码如下：functionbase64Encode(str:string){varout,i,len;变量c1、c2、c3；len=str.length;我=0;出=“”;varbase64EncodeChars="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_";而（我<长度）{c1=str.charCodeAt(i++)&0xff;如果(i==len){out+=base64EncodeChars.charAt(c1>>2);out+=base64EncodeChars.charAt((c1&0x3)<<4);输出+=“==”；休息;}c2=str.charCodeAt(i++);如果(i==len){out+=base64EncodeChars.charAt(c1>>2);out+=base64EncodeChars.charAt(((c1&0x3)<<4)|((c2&0xF0)>>4));out+=base64EncodeChars.charAt((c2&0xF)<<2);出+=“=”；休息;}c3=str.charCodeAt(i++);输出+=base64EncodeChars.charAt(c1>>2);out+=base64EncodeChars.charAt(((c1&0x3)<<4)|((c2&0xF0)>>4));out+=base64EncodeChars.charAt(((c2&0xF)<<2)|((c3&0xC0)>>6));输出+=base64EncodeChars.charAt(c3&0x3F);}返回；}函数utf16to8(str:string){varout,i,len,c;出=“”;len=str.length;对于(i=0;i
