这篇文章主要讲解了“如何使用vue3+typescript实现文件上传”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何使用vue3+typescript实现文件上传”吧！
计算
安全
数据库
网络和加速
企业服务
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中添加控件，示例如下：
<div class="mx-auto text-center">
<div class="text-center text-gray-600">
<label
for="file-upload"
class="relative cursor-pointer bg-white rounded-md text-gray-400 hover:text-indigo-500"
>
<svg
class="mx-auto h-8 w-8"
stroke="currentColor"
fill="none"
viewBox="0 0 48 48"
aria-hidden="true"
>
<path
d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<input
id="file-upload"
name="cover"
type="file"
class="sr-only"
accept="image/png,image/jpeg,image/jpg"
@change="uploadImage($event.target.files)"
/>
</label>
</div>
<p class="text-xs text-gray-500">png, jpeg, jpg</p>
<p class="text-xs text-gray-500">up to 2MB</p>
</div>在方法中调用uploadFile方法，下面示例只上传一个文件：
// 上传文件
uploadImage(files: Array<File>) {
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实现文件上传这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://my.oschina.net/u/4066932/blog/5020183
