File upload is the most common business requirement. The upload function can be simple or complex. Simple is to transfer the file. Complex is to continue the transmission of large files at breakpoints and control concurrency. I don't know how much you know about upload. Today I'd like to share with you some of the most common scenarios in the upload requirements. I won't say much. Let's start:
Drag upload
Drag upload involves style interaction and file information acquisition. First, let's learn about several drag related events:
- Drawer - triggered when the dragged object enters the target container
- dragleave - triggered when the dragged object leaves the target container
- drop - the dragged object enters the target container and is triggered when the mouse button is released
After understanding these events, it is quite easy to drag and upload. Effect drawing first:
Effect display
When the dragged object enters the target container, the container border turns red. When you drag out the target container or release the mouse button, the container border is grayed out. When the mouse button is released, the file information of the dragged object is obtained.
code implementation
<template> <div ref="drag" class="drag"> <div class="drag-icon-box"> <!-- Using element-ui Icon for --> <i class="el-icon-upload"></i> </div> <div class="drag-message"> <span class="drag-message-title">Drag the file here, or</span> <label for="file" class="drag-message-label"> <input class="drag-message-input" type="file" id="file" name="file" @change="handleFileChange" /> <span class="drag-message-manual">Click upload</span> </label> </div> </div> </template> <script> export default { data() { return { file: null } }, async mounted() { // Bind related drag events to the container this.bindEvents() }, methods: { bindEvents() { const drag = this.$refs.drag // The dragged object enters the target container drag.addEventListener('dragover', e => { e.preventDefault() drag.style.borderColor = 'red' }) // The dragged object leaves the target container drag.addEventListener('dragleave', e => { e.preventDefault() drag.style.borderColor = '#eee' }) // The dragged object enters the target container and releases the mouse button drag.addEventListener('drop', e => { e.preventDefault() drag.style.borderColor = '#eee' const fileList = e.dataTransfer.files this.file = fileList[0] this.uploadFile() }) }, async uploadFile() { const form = new FormData() form.append('name', 'file') form.append('file', this.file) const res = await axios.post('/upload', form) }, handleFileChange(e) { const file = e.target.files[0] if (!file) return this.file = file this.uploadFile() } } } </script> <style lang="scss" scoped> .drag { width: 660px; height: 300px; border: 2px dashed; border-color: #a3a3a3; border-radius: 5px; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; flex-wrap: wrap; .drag-icon-box { width: 100%; height: 60px; text-align: center; font-size: 50px; line-height: 60px; color: #606266; } .drag-message { width: 100%; height: 50px; line-height: 50px; text-align: center; .drag-message-title { font-size: 14px; color: #606266; } .drag-message-label { width: 120px; height: 50px; height: auto; position: relative; overflow: hidden; .drag-message-input { position: absolute; left: -100px; top: -100px; z-index: -1; display: none; } .drag-message-manual { font-size: 14px; color: #4b87ff; cursor: pointer; } } } } </style>
Upload progress bar
Progress bar is the most common requirement, especially when uploading large files. The implementation method is also relatively simple. Just use the onUploadProgress method of axios.
Effect display
code implementation
<div> <!-- Using element-ui Progress bar component --> <el-progress :stroke-width="20" :text-inside="true" :percentage="uploadProgress" ></el-progress> </div> <script> export default { data() { return { file: null, uploadProgress: 0 } }, methods: { async uploadFile() { const form = new FormData() form.append('name', 'file') form.append('file', this.file) const res = await axios.post('/uploadfile', form, { onUploadProgress: progress => { this.uploadProgress = Number( ((progress.loaded / progress.total) * 100).toFixed(2) ) } }) }, handleFileChange(e) { const file = e.target.files[0] if (!file) return this.file = file this.uploadFile() } } } </script>
Cancel upload
When the upload is very slow, or when you shake your hand and upload a video that should not be uploaded (you know), can you cancel it if the upload is not completed? Of course, the answer is yes.
Effect display
In fact, canceling the upload is to cancel the ajax request. You can use the cancel token of axios to cancel it.
Method 1: create a cancel token using the CancelToken.source factory method
const CancelToken = axios.CancelToken; const source = CancelToken.source(); axios.post('/upload', form, { cancelToken: source.token }) source.cancel();
Method 2: pass an executor function to CancelToken To create a cancel token
const CancelToken = axios.CancelToken; let cancel; axios.post('/upload', form, { cancelToken: new CancelToken(function executor(c) { cancel = c; }) }); cancel();
Interested students can try to integrate the above methods into their own projects.
summary
ok, the above are some of the most common scenarios in upload requirements. Whether drag upload or paste upload, the most important thing is to get the file information through the corresponding events. The progress bar and cancel upload are implemented by using the api of axios. axios also has many practical configuration options. You can study them yourself.
If the above is helpful to you, don't forget to like it~
It is said that people who like praise are not bad luck. I believe you will pass every exam and win every prize this year 😘