Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to use vue3+typescript to achieve file upload", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "how to use vue3+typescript to achieve file upload" bar!

First, install qiniu-js and crypto-js dependencies. Qiniu-js is upload. Crypto-js (remember to add .d.ts support) is a tool that needs encryption when generating token. The installation command is as follows: yarn add crypto-js qiniu-js-D.

Create a new upload.ts file in the tool / plug-in directory, refer to the official documentation to write the upload method, and encrypt and generate token. The first is the upload method, and the final code is as follows:

Import * as qiniu from 'qiniu-js';import CryptoJS from' crypto-js'// request API to upload images 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 / / whether to upload all images directly} Const putExtra: any = {fname: file.name, / / the original file name mimeType: ['image/png',' image/jpeg', 'image/gif'] / / is used to limit the uploaded file type. If null, there is no restriction on file type. }; return qiniu.upload (file, key, uptoken, putExtra, config);}

Note that what is finally returned here is the execution result of upload (), which is an object with next, error, and complete. Instead of processing the process and result, it is directly returned and processed where it is used.

The uploadFile () method needs to be exposed for use in the component

The three parameters of the getToken () method are accessKey, secretKey and bucketName. You need to log in to your Qiniuyun account to view. After logging in, click the avatar, and then click key management. The final code of the getToken () method is as follows:

Function getToken (access_key: string, secret_key: string, bucketname: string) {/ / Construction Strategy 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) / / Construction credential var encodedSign = hash.toString (CryptoJS.enc.Base64). Replace (/\ / / g,'_'). Replace (/\ + / g,'-'); var uploadToken = access_key +':'+ encodedSign +':'+ encoded; return uploadToken;}

The code implementation of the base64Encode () and utf16to8 () methods in the getToken () method is as follows:

Function base64Encode (str: string) {var out, I, len; var C1, c2, c3; len = str.length; I = 0; out = ""; var base64EncodeChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_"; while (I

> 2); out + = base64EncodeChars.charAt ((C1 & 0x3) > 2); out + = base64EncodeChars.charAt ((C1 & 0x3) > 4); out + = base64EncodeChars.charAt ((c2 & 0xF) > 2); out + = base64EncodeChars.charAt ((C1 & 0x3) > 4); out + = base64EncodeChars.charAt ((c2 & 0xF) > 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

= 0x0001) & & (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;}

The entire upload method is completed and then used in the component. The example is as follows:

Import {uploadFile} from ".. /.. / plugins/upload"

Add controls to html, as shown in the following example:

Png, jpeg, jpg

Up to 2MB

Call the uploadFile method in the method, and the following example uploads only one file:

/ / upload file 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;,});}}

It's a success here. It's not easy.

Thank you for your reading, the above is "how to use vue3+typescript to achieve file upload" content, after the study of this article, I believe you on how to use vue3+typescript to achieve file upload this problem has a deeper understanding, the specific use of the situation also needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.