如何使用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中添加控件，示例如下：

<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實現文件上傳這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！