To develop an Upload component, we need to know:

FormData API required for uploading files dragOver file is triggered when the dragLeave file leaves the dragOver area drop file is moved to a valid target first implement a basic upload process:

Click the button to select the basic upload process and complete the upload code as follows:

}})

Copy the code as follows:

Now that we’ve done our basic uploading, which is relatively simple, we’ll create uploader.vue to wrap the Upload component.

We need to implement the following functions:

<div class=”upload-area” @click=”triggerUpload”> <div class=”upload-area” @click=”triggerUpload”>

Support file upload list Handling file upload list we need to have the following implementation:

Display file name status can be deleted Display upload progress may have richer display make some modifications based on the code in the previous step:

Supports a series of lifecycle hook events, upload events beforeUpload

Copying code implementation steps:

Define the property beforeUpload at poops, define the upload File as Boolean or promsie and accept a File encapsulating the original upload method as postFile Returns the result according to beforeUpload, proceed with onProgress, OnSuccess, onError, onChange are similar

The general drag and drop process is shown as follows:

Dragover and Dragleave add and remove the corresponding class drop to get the file being dragged, delete the class, and trigger the upload only if the drag property is true.

The above is the basic upload general component based on VUe3 implementation, with the upload interface code attached:

Const Koa = require(‘ Koa ‘); const fs = require(‘fs’); const path = require(‘path’); const router = require(‘koa-router’)(); const koaBody = require(‘koa-body’); const static = require(‘koa-static’); const cors = require(‘koa2-cors’)

// instantiate const app = new Koa();

App. use(koaBody({multipart: true, // Support file upload formidable: {maxFieldsSize: 2 * 1024 * 1024, // Max file is 2 MB multipart: True // Whether multipart-formdate forms are supported}});

const uploadUrl = “http://localhost:3001/static/upload”;

Router.get (‘/’, (CTX) => {// Set the header type. Const pathUrl = path.join(__dirname, ‘/static/upload.html’); ctx.body = fs.createReadStream(pathUrl); });

Router.post (‘/upload’, (CTX) => {// Get the uploaded file const file = ctx.request.files.file; console.log(file); Const fileReader = fs.createreadStream (file.path); Const filePath = path.join(__dirname, ‘/static/upload/’); // set filePath const filePath = path.join(__dirname, ‘/static/upload/’); Const fileResource = filePath + /${file.name};

/ * *

  • Write the data using createWriteStream and then concatenate it using the pipe stream

*/ const writeStream = fs.createWriteStream(fileResource); // check if the /static/upload folder exists and create an if (! fs.existsSync(filePath)) { fs.mkdir(filePath, (err) => { if (err) { throw new Error(err); } else { fileReader.pipe(writeStream); Ctx. body = {url: uploadUrl + /${file.name}, code: 0, message: ‘uploadUrl 1’}; }}); } else { fileReader.pipe(writeStream); Ctx. body = {url: uploadUrl + /${file.name}, code: 0, message: ‘uploadUrl 1’}; }});

App. use(static(path.join(__dirname))); Use (router.routes()).use(router.allowedMethods()); // Enable app.use(router.routes()).

App.listen (3001, () => {console.log(‘server is listen in 3001’); // App.listen (3001, () => {console.log(‘server is listen in 3001’); }); Copying code at the end is just a simple implementation, of course we can also add custom headers, custom pass data, accecpt, etc