如何使用vue3+typescript实现文件上传
这篇文章主要讲解了“如何使用vue3+typescript实现文件上传”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何使用vue3+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(encoded, secret_key); // 构造凭证 var encodedSign = hash.toString(CryptoJS.enc.Base64).replace(/\//g, '_').replace(/\+/g, '-'); var uploadToken = access_key + ':' + encodedSign + ':' + encoded; return uploadToken; }
getToken()方法中的base64Encode()和utf16to8()这两个方法的代码实现如下:
function base64Encode(str: string) { var out, i, len; var c1, c2, c3; len = str.length; i = 0; out = ""; var base64EncodeChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_"; while (i < len) { c1 = str.charCodeAt(i++) & 0xff; if (i == len) { out += base64EncodeChars.charAt(c1 >> 2); out += base64EncodeChars.charAt((c1 & 0x3) << 4); out += "=="; break; } c2 = str.charCodeAt(i++); if (i == len) { out += base64EncodeChars.charAt(c1 >> 2); out += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4)); out += base64EncodeChars.charAt((c2 & 0xF) << 2); out += "="; break; } c3 = str.charCodeAt(i++); out += base64EncodeChars.charAt(c1 >> 2); out += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4)); out += base64EncodeChars.charAt(((c2 & 0xF) << 2) | ((c3 & 0xC0) >> 6)); out += base64EncodeChars.charAt(c3 & 0x3F); } return out; }
function utf16to8(str: string) { var out, i, len, c; out = ""; len = str.length; for (i = 0; i < len; i++) { c = str.charCodeAt(i); if ((c >= 0x0001) && (c <= 0x007F)) { out += str.charAt(i); } else if (c > 0x07FF) { out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F)); out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F)); out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F)); } else { out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F)); out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F)); } } return out; }
整个上传的方法就完成了,然后在组件使用,示例如下:
import { uploadFile } from "../../plugins/upload";
在html中添加控件,示例如下:
png, jpeg, jpg
up to 2MB
在方法中调用uploadFile方法,下面示例只上传一个文件:
// 上传文件 uploadImage(files: Array) { if (files.length > 0) { uploadFile(files[0]).subscribe({ next: (result) => { }, error: () => { }, complete: (e) => { let data = { ...this.postsData, cover: "https://cdn.leafage.top/" + e.key, }; this.postsData = data; }, }); } },
到这里就成功了,不容易呀。
感谢各位的阅读,以上就是“如何使用vue3+typescript实现文件上传”的内容了,经过本文的学习后,相信大家对如何使用vue3+typescript实现文件上传这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!
当前标题:如何使用vue3+typescript实现文件上传
分享网址:http://scyanting.com/article/peedgd.html