如何使用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实现文件上传这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注！