Example code for implementing an Upload component using Vue3
General upload component developmentBefore developing the upload component, we need to understand:
First, implement a basic upload process: Basic upload process, click the button to select and complete the upload The code is as follows:
<template>
<div class="app-container">
<!--Use the change event-->
<input type="file" @change="handleFileChange">
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import axios from 'axios'
export default defineComponent({
name: 'App',
setup() {
const handleFileChange = (e: Event) => {
// Assert that it is an HTMLInputElement
const target = e.target as HTMLInputElement
const files = target.files
if(files) {
const uploadedFile = files[0]
const formData = new FormData()
formData.append('file', uploadedFile)
//Use node to simulate the upload interface axios.post('http://localhost:3001/upload', formData, {
headers: {
"Content-Type": 'multipart/form-data'
}
}).then(resp=> {
console.log('resp', resp)
}).catch(error=> {
})
}
}
return {
handleFileChange
}
}
})
</script>
<style>
.page-title {
color: #fff;
}
</style>The results are as follows:
At this point, our basic upload has been processed, which is relatively simple. Next, we create the Uploader.vue file to encapsulate the Upload component. We need to implement the following functions Custom templatesWe know that using the system's own style of <input type="file"> is ugly, so we need to deal with it as follows:
The code is as follows:
<template>
<div class="file-upload">
<div class="upload-area" @click="triggerUpload"></div>
<span v-if="fileStatus==='loading'">Uploading</span>
<span v-else-if="fileStatus==='success'">Upload successful</span>
<span v-else-if="fileStatus==='error'">Upload failed</span>
<span v-else>Click to upload</span>
<input ref="fileInput" type="file" name="file" style="display: none" />
</div>
</template>
<script lang="ts">
import { computed, defineComponent, PropType, reactive, ref } from 'vue'
import axios from 'axios'
type UploadStatus = 'ready' | 'loading' | 'success' | 'error'
export default defineComponent({
props: {
action: { // url address type: String,
required: true
}
},
setup(props) {
// Input instance object, obtained by associating with ref="fileInput" const fileInput = ref<null | HTMLInputElement>(null)
const fileStatus = ref<UploadStatus>('ready')
// 1.div click event const triggerUpload = () => {
if(fileInput.value) {
fileInput.value.click()
}
}
// Trigger the input change event through div const handleFileChange = (e: Event) => {
const target = e.target as HTMLInputElement
const files = target.files
if(files) {
const uploadedFile = files[0]
const formData = new FormData()
formData.append('file', uploadedFile)
readyFile.status = 'loading' // Set the status to loading before uploading
axios.post(props.actions, formData, {
headers: {
"Content-Type": 'multipart/form-data'
}
}).then(resp=> {
console.log('resp', resp)
readyFile.status = 'success' // Upload successfully and set the status to success
}).catch(error=> {
readyFile.status = 'error' // // Upload failed and set the status to error
})
}
}
return {
fileInput,
triggerUpload,
handleFileChange,
fileStatus
}
}
})
</script>
Now that we have completed the optimization of the upload component style and the processing of the upload status, we need to process the file upload list. Support file upload listTo handle the file upload list we need to have the following implementation:
Make some changes based on the previous code:
<template>
<div class="file-upload">
<div class="upload-area" @click="triggerUpload"></div>
<!-- Click to upload -->
<slot v-if="isUploading" name='loading'>
<button disabled>Uploading</button>
</slot>
<!-- Upload completed -->
<slot name="uploaded" v-else-if="lastFileData && lastFileData.loaded" :uploadData="lastFileData.data">
<button disabled>Click to upload</button>
</slot>
<!-- Default state -->
<slot v-else name='default'>
<!-- <button disabled>Click to upload</button> -->
<span>Click to upload</span>
</slot>
<input ref="fileInput" type="file" name="file" style="display: none" />
<!--Show fileList-->
<ul>
<li
v-for="file in filesList"
:key="file.uid"
:class="`uploaded-file upload-${file.status}`"
>
<span class="filname">
{{ file.name }}
</span>
<button class="delete-icon" @click="reomveFile(file.uid)">Del</button>
</li>
</ul>
</div>
</template>
<script lang="ts">
import { last } from 'lodash-es'
import { v4 as uuidv4 } from 'uuid';
// Define upload status type UploadStatus = 'ready' | 'loading' | 'success' | 'error'
// step1 define the upload file object interface class export interface UploadFile {
uid: string; // unique id of the file
size: number; // file sizename: string; // file namestatus: UploadStatus; // upload statusraw: File; // fileprogress?: string; // file upload progressresp?: any; // server return dataurl?: string // corresponding display url
}
export default defineComponent({
props: {
action: { // url address type: String,
required: true
}
},
setup(props) {
// Input instance object, obtained by associating with ref="fileInput" const fileInput = ref<null | HTMLInputElement>(null)
// step2 upload file list const filesList = ref<UploadFile[]>([])
// step4-1 Determine whether uploading is in progress const isUploading = computed(()=> {
return filesList.value.some((file)=>file.status==='loading')
})
//step4-2 Get the last item of the uploaded file const lastFileData = computed(()=>{
const lastFile = last(filesList.value)
if(!lastFile) return false
return {
loaded: lastFile?.status === 'success',
data:lastFile?.resp
}
})
// 1.div click event const triggerUpload = () => {
if(fileInput.value) {
fileInput.value.click()
}
}
// Trigger the input change event through div const handleFileChange = (e: Event) => {
const target = e.target as HTMLInputElement
const files = target.files
if(files) {
const uploadedFile = files[0]
const formData = new FormData()
formData.append('file', uploadedFile)
// step3 Set up a responsive object and store it in filesList for display on the page const fileObj = reactive<UploadFile>({
uid: uuid(); // unique id of the file
size: uploadedFile.size,
name: uploadedFile.name,
status: 'loading',
raw: uploadedFile
})
filesList.value.push(fileObj)
axios.post(props.actions, formData, {
headers: {
"Content-Type": 'multipart/form-data'
},
//step6 process upload progress onUploadProgress: (progressEvent)=> {
const complete = (progressEvent.loaded / progressEvent.total * 100 | 0) + '%'
fileObj.progress = complete
}
}).then(resp=> {
console.log('resp', resp)
fileObj.status = 'success'
}).catch(error=> {
fileObj.status = 'error'
}).finally(()=> {
// A bug that prevents a picture from being uploaded again
if(fileInput.value) {
fileInput.value.value = ''
}
})
}
}
// step7 process deletion const reomveFile = (uid: string) => {
filesList.value = filesList.value.filter(file=>file.uid!==uid)
}
return {
fileInput,
triggerUpload,
handleFileChange,
fileStatus,
isUploading,
filesList,
lastFileData
}
}
})
</script>
Note: If you select the same image, the upload will not be performed. Because we are using the input change event, we need to set the input value to null after uploading. Supports a series of lifecycle hook events, upload events beforeUpload
<template>
...
</template>
<script lang="ts">
import { last } from 'lodash-es'
import { v4 as uuidv4 } from 'uuid';
// Define upload status type UploadStatus = 'ready' | 'loading' | 'success' | 'error'
// Define the uploaded file as boolean or promise and accept a File
type CheckUpload = ()=> boolean | Promise<File>
export interface UploadFile {
...
}
export default defineComponent({
props: {
action: { // url address type: String,
required: true
},
beforeUpload: {
type: Function as PropType<CheckUpload>
}
},
setup(props) {
const fileInput = ref<null | HTMLInputElement>(null)
const filesList = ref<UploadFile[]>([])
// step4-1 Determine whether uploading is in progress const isUploading = computed(()=> {
return filesList.value.some((file)=>file.status==='loading')
})
const lastFileData = computed(()=>{
const lastFile = last(filesList.value)
if(!lastFile) return false
return {
loaded: lastFile?.status === 'success',
data:lastFile?.resp
}
})
const triggerUpload = () => {
if(fileInput.value) {
fileInput.value.click()
}
}
const handleFileChange = (e: Event) => {
const target = e.target as HTMLInputElement
const files = target.files
const uploadedFile = files[0]
if(props.beforeUpload) {
const result = props.beforeUpload(uploadedFile)
if (result && result instanceof Promise) {
result.then((processFile)=> {
if (uploadedFile instanceof File) {
postFile(uploadedFile)
}
}).catch(error=>{
console.error(error)
})
} esle if(result===true) {
postFile(uploadedFile)
}
}else{
postFile(uploadedFile)
}
}
const reomveFile = (uid: string) => {
filesList.value = filesList.value.filter(file=>file.uid!==uid)
}
// Process file upload const postFile = (readyFile:UploadFile)=> {
const formData = new FormData()
formData.append('file', readyFile.raw)
readyFile.status = 'loading'
axios.post(props.action, formData, {
headers: {
"Content-Type": 'multipart/form-data'
},
onUploadProgress: (progressEvent) => {
const complete = (progressEvent.loaded / progressEvent.total * 100 | 0) + '%'
// console.log('upload' + complete)
readyFile.progress = complete
}
}, ).then(resp=> {
console.log('resp', resp)
// fileStatus.value = 'success'
readyFile.status = 'success'
readyFile.resp = resp.data
}).catch(error=> {
// fileStatus.value = 'error'
readyFile.status = 'error'
})
.finally(()=> {
// A bug that prevents a picture from being uploaded again
if(fileInput.value) {
fileInput.value.value = ''
}
})
}
return {
fileInput,
triggerUpload,
handleFileChange,
fileStatus,
isUploading,
filesList,
lastFileData
}
}
})
</script>
Implementation steps:
onProgress, onSuccess, onError, and onChange are similar Drag and drop supportThe general process is as follows:
Please note that the use of v-on can be found in the vue official documentation Above code:
<template>
<div class="file-upload">
<div
:class="['upload-area', drag && isDragOver ? 'is-dragover': '' ]"
v-on="events"
>
<!-- Click to upload -->
<slot v-if="isUploading" name='loading'>
<button disabled>Uploading</button>
</slot>
<!-- Upload completed -->
<slot name="uploaded" v-else-if="lastFileData && lastFileData.loaded" :uploadData="lastFileData.data">
<button disabled>Click to upload</button>
</slot>
<!-- Default state -->
<slot v-else name='default'>
<!-- <button disabled>Click to upload</button> -->
<span>Click to upload</span>
</slot>
</div>
<input ref="fileInput" type="file" name="file" style="display: none" @change="handleFileChange" />
<ul>
<li
v-for="file in filesList"
:key="file.uid"
:class="`uploaded-file upload-${file.status}`"
>
<img
v-if="file.url && listType === 'picture'"
class="upload-list-thumbnail"
:src="file.url"
:alt="file.name"
>
<span class="filname">
{{ file.name }}
</span>
<span class="progress">
{{ file.progress }}
</span>
<button class="delete-icon" @click="reomveFile(file.uid)">Del</button>
</li>
</ul>
</div>
</template>
<script lang="ts">
import { computed, defineComponent, PropType, reactive, ref } from 'vue'
import axios from 'axios'
import { v4 as uuidv4 } from 'uuid';
import { last } from 'lodash-es'
type UploadStatus = 'ready' | 'loading' | 'success' | 'error'
type fileListType = 'text' | 'picture'
type CheckUpload = ()=> boolean | Promise<File>
export interface UploadFile {
uid: string; // unique id of the file
size: number; // file sizename: string; // file namestatus: UploadStatus; // upload statusraw: File; // file progress?: string;
resp?: any; // data returned by the server url?: string // corresponding displayed url
}
// dragOver is triggered when the file is dragged into the area // dragLeave is triggered when the file leaves the drag area // drop event gets the file being dragged, deletes the class and triggers upload // only works when drag is set export default defineComponent({
name: 'Uploader',
props: {
action: { // url address type: String,
required: true
},
beofreUpload:{ // Processing before uploading type: Function as PropType<CheckUpload>
},
drag: { // Whether to drag type: Boolean,
default: false
},
autoUpload: { // Automatic upload type: Boolean,
default: true
},
listType: {
type: String as PropType<fileListType>,
default: 'text'
}
},
setup(props) {
const fileInput = ref<null | HTMLInputElement>(null)
const fileStatus = ref<UploadStatus>('ready')
//Store uploaded files const filesList = ref<UploadFile[]>([])
// Defines an isDragOver flag to handle the dragged style.upload-area display const isDragOver = ref<boolean>(false)
const triggerUpload = () => {
if(fileInput.value) {
fileInput.value.click()
}
}
let events: {[key:string]: (e: any)=>void} = {
'click': triggerUpload,
}
// As long as there is a file in the loading state, it means it is being uploaded const isUploading = computed(()=>{
return filesList.value.some((file)=> file.status==='loading')
})
// Get the last item of the uploaded file const lastFileData = computed(()=>{
const lastFile = last(filesList.value)
if(!lastFile) return false
return {
loaded: lastFile?.status === 'success',
data:lastFile?.resp
}
})
// Handle dragover, dragleave
const handleDrag = (e: DragEvent, over: boolean) => {
// Prevent the default event e.preventDefault()
// dragover is true, dragleave is false
isDragOver.value = over
}
// Handle drop
const handleDrop = (e: DragEvent) => {
e.preventDefault()
isDragOver.value = false
if(e.dataTransfer) {
beforeUploadCheck(e.dataTransfer.files)
}
}
if (props.drag) {
events = {
...events,
'dragover': (e: DragEvent) => { handleDrag(e, true)},
'dragleave': (e: DragEvent) => { handleDrag(e, false)},
'drop': handleDrop
}
// console.log(events)
}
// delete file const reomveFile = (uid: string)=> {
filesList.value = filesList.value.filter(file=>file.uid!==uid)
}
const postFile = (readyFile:UploadFile) => {
const formData = new FormData()
formData.append('file', readyFile.raw)
readyFile.status = 'loading'
// After selecting the file, push it to the storage object axios.post(props.action, formData, {
headers: {
"Content-Type": 'multipart/form-data'
},
onUploadProgress: (progressEvent) => {
const complete = (progressEvent.loaded / progressEvent.total * 100 | 0) + '%'
// console.log('upload' + complete)
readyFile.progress = complete
}
}, ).then(resp=> {
console.log('resp', resp)
// fileStatus.value = 'success'
readyFile.status = 'success'
readyFile.resp = resp.data
}).catch(error=> {
// fileStatus.value = 'error'
readyFile.status = 'error'
})
.finally(()=> {
// A bug that prevents a picture from being uploaded again
if(fileInput.value) {
fileInput.value.value = ''
}
})
}
const addFileToList = (uploadedFile: File) => {
const fileObj = reactive<UploadFile>({
uid: uuidv4(),
size: uploadedFile.size,
name: uploadedFile.name,
status: 'ready',
raw: uploadedFile
})
// Process the image format and display if(props.listType==='picture') {
// try {
// fileObj.url = URL.createObjectURL(uploadedFile)
// }catch(err) {
// console.error('upload file err', err)
// }
const fileReader = new FileReader()
fileReader.readAsDataURL(uploadedFile)
fileReader.addEventListener('load', ()=> {
fileObj.url = fileReader.result as string
})
}
filesList.value.push(fileObj)
if(props.autoUpload) {
postFile(fileObj)
}
}
const uploadFiles = ()=> {
// filesList.value.filter(file => file.status === 'ready').forEach(readyFile => postFile(readyFile))
filesList.value.filter(file => file.status === 'ready').forEach(readyFile=>postFile(readyFile))
}
const beforeUploadCheck = (files: null | FileList ) => {
if(files) {
fileStatus.value = 'loading'
const uploadedFile = files[0]
if(props.beofreUpload) {
const result = props.beofreUpload()
// If there is a return value if(result && result instanceof Promise) {
result.then(processedFile=> {
if (processedFile instanceof File) {
addFileToList(processedFile)
} else {
throw new Error('beforeUpload promise should return file object')
}
}).catch(err=> {
console.log(err)
})
} else if(result === true) {
addFileToList(uploadedFile)
}
} else {
addFileToList(uploadedFile)
}
}
}
const handleFileChange = (e: Event) => {
const target = e.target as HTMLInputElement
const files = target.files
beforeUploadCheck(files)
}
return {
fileInput,
triggerUpload,
handleFileChange,
isUploading,
filesList,
reomveFile,
lastFileData,
beforeUploadCheck,
isDragOver,
events
}
}
})
</script>
The above is the basic upload general component based on vue3. The upload interface code is also attached:
// Import module 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')
// Instantiation const app = new Koa();
app.use(koaBody({
multipart: true, // Support file upload formidable: {
maxFieldsSize: 2 * 1024 * 1024, // Maximum file size is 2 MB multipart: true // Whether to support multipart-formdate forms}
}));
const uploadUrl = "http://localhost:3001/static/upload";
// Configure routing router.get('/', (ctx) => {
// Set the header type. If not set, the page will be downloaded directly ctx.type = 'html';
// Read file const pathUrl = path.join(__dirname, '/static/upload.html');
ctx.body = fs.createReadStream(pathUrl);
});
// Upload files router.post('/upload', (ctx) => {
// Get the uploaded file const file = ctx.request.files.file;
console.log(file);
// Read file stream const fileReader = fs.createReadStream(file.path);
// Set the file save path const filePath = path.join(__dirname, '/static/upload/');
// Assemble into absolute path const fileResource = filePath + `/${file.name}`;
/**
* Use createWriteStream to write data, and then use pipe stream splicing*/
const writeStream = fs.createWriteStream(fileResource);
// Check if the /static/upload folder exists, if not create one 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: 'Upload successful 1'
};
}
});
} else {
fileReader.pipe(writeStream);
ctx.body = {
url: uploadUrl + `/${file.name}`,
code: 0,
message: 'Upload successful 1'
};
}
});
//Configure static resource path app.use(static(path.join(__dirname)));
// Enable cross-domain app.use(cors())
// Start routing app.use(router.routes()).use(router.allowedMethods());
// Listening port number app.listen(3001, () => {
console.log('server is listening in 3001');
});
Final ThoughtsThe above is just a simple implementation. Of course, we can also add custom headers, custom data, access, etc. This concludes this article about using Vue3 to implement an Upload component sample code. For more related Vue3 Upload component content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
>>: Mac VMware Fusion CentOS7 configuration static IP tutorial diagram
Recommend
Historical Linux image processing and repair solutions
The ECS cloud server created by the historical Li...
Implementation of navigation bar and drop-down menu in CSS
1. CSS Navigation Bar (1) Function of the navigat...
Using streaming queries in MySQL to avoid data OOM
Table of contents 1. Introduction 2. JDBC impleme...
Detailed tutorial on deploying Apollo custom environment with docker-compose
Table of contents What is the Apollo Configuratio...
Simple comparison of meta tags in html
The meta tag is used to define file information an...
Solution for Baidu site search not supporting https (tested)
Recently, https has been enabled on the mobile ph...
Implementation of Docker deployment of ElasticSearch and ElasticSearch-Head
This article mainly explains how to deploy Elasti...
MySQL slow query optimization: the advantages of limit from theory and practice
Many times, we expect the query result to be at m...
Several methods for js to determine the horizontal and vertical screen viewport detection of mobile terminals
Table of contents 1. How to obtain different view...
Vue uses the Element el-upload component to step on the pit
Table of contents 1. Basic Use 2. Image quantity ...
Vue uses Split to encapsulate the universal drag and slide partition panel component
Table of contents Preface start Basic layout Data...
In-depth explanation of the failure of writing SQL containing English single quotation marks "''"
I have encountered a problem. When testing the ed...
Summary of four ways to loop through an array in JS
This article compares and summarizes four ways of...
Detailed explanation of how Zabbix monitors the master-slave status of MySQL
After setting up the MySQL master-slave, you ofte...
Two practical ways to enable proxy in React
Two ways to enable proxy React does not have enca...