Full-screen drag upload component based on Vue3
|
This article mainly introduces the full-screen drag upload component based on Vue3, which is shared with everyone. The details are as follows: Knowledge Points
It's a long story, to make it short, I've only done some examples of drag and drop sorting with the HTML5 drag API. In fact, the idea is basically the same as other drag and drop upload components, which are to specify an area for dragging, and then read the file and upload it. Let's talk about the drag API first, which is a new API in HTML5. When you set the draggable = true attribute to an element, the element will support dragging. The drag element events are as follows 1. ondrag runs the script when dragging an element The events of the target element are as follows: For example, we want to monitor the dragging of the body:
const ele = document.querySelector('body')
ele.addEventListener('dragenter', (e) => {
// do something
})
And when we want to prevent the default event we can use e.preventDefault() ComponentsLet's take a look at the effect first. At this time, I have set it to only upload png and jpg
use:
<upload
accept=".jpg,.png,.ico" // Set the file type @onChange="change" // File upload event action="http://localhost:3001/upload" // Upload address: header="header" // Uploaded header
autoUpload //Whether to upload automatically name="file" //Uploaded field name @onSuccess="onSuccess" //Upload successful callback></upload>
At the beginning, when I wanted to get the dragged element, I found that even though I added the listening event, a new window would still be opened to preview the file, so our first step was to disable all the default events.
// Disable default drag events function disableDefaultEvents() {
const doc = document.documentElement
doc.addEventListener('dragleave', (e) => e.preventDefault()) //Drag awaydoc.addEventListener('drop', (e) => e.preventDefault()) //Drag and dropdoc.addEventListener('dragenter', (e) => e.preventDefault()) //Drag indoc.addEventListener('dragover', (e) => e.preventDefault()) //Drag back and forth}
Get the root element directly to prevent the default event of dragging The second step is to add the events we want to monitor to the body or other elements. One thing to note here is that the height of the body must be the height of the window, so that full-screen dragging can be achieved. When dragging away, we also need to determine whether the file is dragged out of the area. Here is the total judgment:
e.target.nodeName === 'HTML', this is used to determine whether the root element is html
e.target === e.explicitOriginalTarget This is a Firefox-specific API that determines whether the targets of the two triggering events are consistent (!e.fromElement &&
(e.clientX <= 0 ||
e.clientY <= 0 ||
e.clientX >= window.innerWidth ||
e.clientY >= window.innerHeight))
This is used to determine the current position of the mouse, whether it is still in the area
// Initialize the drag event function init() {
// Get the body element const ele = document.querySelector('body')
// Add event // drag and drop ele.addEventListener('dragenter', () => {
show.value = true
})
// Here we determine whether the mouse is dragged awayele.addEventListener('dragleave', (e) => {
if (
e.target.nodeName === 'HTML' ||
e.target === e.explicitOriginalTarget ||
(!e.fromElement &&
(e.clientX <= 0 ||
e.clientY <= 0 ||
e.clientX >= window.innerWidth ||
e.clientY >= window.innerHeight))
) {
show.value = false
}
})
//Drag inele.addEventListener('drop', (e) => {
show.value = false
e.preventDefault()
onDrop(e) // Method for dragging and processing files})
}
The third step is to process the dragged file. At this time, accept is the file type we defined. At this time, we can use the e.dataTransfer.files property to get the dragged file. checkType(file,accept) is used to determine the file type. This function is based on the filter of the upload component in element ui. I was also confused when I wrote it.
// Check file type function checkType(file, accept = '') {
const { type, name } = file
if (accept.length === 0) return true
const extension = name.indexOf('.') > -1 ? `.${name.split('.').pop()}` : ''
const baseType = type.replace(/\/.*$/, '')
return accept
.split(',')
.map((type) => type.trim())
.filter((type) => type)
.some((acceptedType) => {
if (/\..+$/.test(acceptedType)) {
return extension === acceptedType
}
if (/\/\*$/.test(acceptedType)) {
return baseType === acceptedType.replace(/\/\*$/, '')
}
if (/^[^/]+\/[^/]+$/.test(acceptedType)) {
return type === acceptedType
}
})
}
This method is used to process the file after it is dragged in. When we get the required file, we use autoUpload to determine whether to upload it.
function onDrop(e) {
const accept = props.accept
const list = [].slice.call(e.dataTransfer.files).filter((file) => {
if (accept) {
return checkType(file, accept)
}
return true
})
fileList = list.map((p) => {
return handleStart(p)
})
// Trigger event onChange()
if (props.autoUpload) {
if (props.action === '') {
onError()
throw 'need action'
return
}
list.forEach((file) => {
post(file) // upload file })
}
}
The source code is as follows:
<template>
<div class="mask" v-show="show" id="mask">
<h3>Drag here to upload</h3>
</div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
// import ajax from './ajax'
const props = defineProps({
name: String, // uploaded field name header: { Object, Number, String }, // uploaded file header // file type to verify, when there is a value, only all files will be dragged in and only the files after the filter setting will be retained accept: {
type: String,
default: '',
},
// Whether to enable automatic upload autoUpload: {
type: Boolean,
default: false,
},
// Upload address action: {
type: String,
default: '#',
},
})
const emit = defineEmits(['onError', 'onProgress', 'onSuccess', 'onChange']) // default emit event let show = ref(false) // whether to display the mask let fileList = reactive([]) // file list let tempIndex = 0 // make a mark onMounted(() => {
disableDefaultEvents()
init()
})
// Initialize the drag event function init() {
const ele = document.querySelector('body')
ele.addEventListener('dragenter', () => {
show.value = true
}) //Drag and dropele.addEventListener('dragleave', (e) => {
if (
e.target.nodeName === 'HTML' ||
e.target === e.explicitOriginalTarget ||
(!e.fromElement &&
(e.clientX <= 0 ||
e.clientY <= 0 ||
e.clientX >= window.innerWidth ||
e.clientY >= window.innerHeight))
) {
show.value = false
}
}) //Drag awayele.addEventListener('drop', (e) => {
show.value = false
e.preventDefault()
onDrop(e)
}) // drag in }
// Disable default drag events function disableDefaultEvents() {
const doc = document.documentElement
doc.addEventListener('dragleave', (e) => e.preventDefault()) //Drag awaydoc.addEventListener('drop', (e) => e.preventDefault()) //Drag and dropdoc.addEventListener('dragenter', (e) => e.preventDefault()) //Drag indoc.addEventListener('dragover', (e) => e.preventDefault()) //Drag back and forth}
//Drag-in event function onDrop(e) {
const accept = props.accept
const list = [].slice.call(e.dataTransfer.files).filter((file) => {
if (accept) {
return checkType(file, accept)
}
return true
})
fileList = list.map((p) => {
return handleStart(p)
})
onChange()
if (props.autoUpload) {
if (props.action === '') {
onError()
throw 'need action'
return
}
list.forEach((file) => {
post(file)
})
}
}
// Check file type function checkType(file, accept = '') {
const { type, name } = file
if (accept.length === 0) return true
const extension = name.indexOf('.') > -1 ? `.${name.split('.').pop()}` : ''
const baseType = type.replace(/\/.*$/, '')
return accept
.split(',')
.map((type) => type.trim())
.filter((type) => type)
.some((acceptedType) => {
if (/\..+$/.test(acceptedType)) {
return extension === acceptedType
}
if (/\/\*$/.test(acceptedType)) {
return baseType === acceptedType.replace(/\/\*$/, '')
}
if (/^[^/]+\/[^/]+$/.test(acceptedType)) {
return type === acceptedType
}
})
}
// Process the file list return value function handleStart(rawFile) {
rawFile.uid = Date.now() + tempIndex++
return {
status: 'ready',
name: rawFile.name,
size: rawFile.size,
percentage: 0,
uid: rawFile.uid,
raw: rawFile,
}
}
//Upload event function post(rawFile) {
const options = {
headers: props.header,
file: rawFile,
data: props.data || '',
filename: props.name || 'file',
action: props.action,
}
upload(options)
.then((res) => {
res.json()
})
.then((json) => {
onSuccess(json, rawFile)
})
.catch((err) => {
onError(err, rawFile)
})
}
// File upload method function upload(option) {
const action = option.action
const formData = new FormData()
if (option.data) {
Object.keys(option.data).forEach((key) => {
formData.append(key, option.data[key])
})
}
formData.append(option.filename, option.file, option.file.name)
const headers = new Headers()
for (let item in headers) {
if (headers.hasOwnProperty(item) && headers[item] !== null) {
headers.append(i, option.headers[i])
}
}
return fetch(action, {
mode: 'no-cors',
body: formData,
headers: headers,
method: 'post',
})
}
// Drag in to get the file list event function onChange() {
emit('onChange', fileList)
}
//Uploading event function onProgress(e, file) {
emit('onProgress', e, file, fileList)
}
// Upload success event function onSuccess(res, file) {
emit('onProgress', res, file, fileList)
}
// Upload failed event function onError() {
emit('onError')
}
</script>
<style scoped>
.mask {
top: 0;
bottom: 0;
right: 0;
left: 0;
position: fixed;
z-index: 9999;
opacity: 0.6;
text-align: center;
background: #000;
}
h3 {
margin: -0.5em 0 0;
position: absolute;
top: 50%;
left: 0;
right: 0;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 40px;
color: #fff;
padding: 0;
}
</style>
This is the end of this article about the full-screen drag and drop upload component based on Vue3. For more relevant Vue3 full-screen drag and drop upload content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: A case study on MySQL optimization
>>: Detailed explanation of how Nginx works
Recommend
JavaScript Composition and Inheritance Explained
Table of contents 1. Introduction 2. Prototype ch...
Beginners understand MySQL deadlock problem from source code
After many difficult single-step debugging late a...
How to detect whether a file is damaged using Apache Tika
Apache Tika is a library for file type detection ...
A quick solution to accidentally delete MySQL data (MySQL Flashback Tool)
Overview Binlog2sql is an open source MySQL Binlo...
Solution to mysql server 5.5 connection failure
The solution to the problem that mysql cannot be ...
Pure CSS3 to achieve pet chicken example code
I have read a lot of knowledge and articles about...
Detailed explanation of Nginx status monitoring and log analysis
1. Nginx status monitoring Nginx provides a built...
How to solve the problem of too many open files in Linux
The cause is that the process opens a number of f...
Use HTML and CSS to create your own warm man "Dabai"
The final result is like this, isn’t it cute… PS:...
Summary of 10 must-see JavaScript interview questions (recommended)
1.This points to 1. Who calls whom? example: func...
Vue image cropping component example code
Example: tip: This component is based on vue-crop...
Detailed explanation of the solution to garbled characters when JDBC connects to MySQL to process Chinese
Detailed explanation of the solution to garbled c...
Detailed example of installing FastDfs file server using docker compose
docker-compose.yml version: '2' services:...
Detailed explanation of this pointing problem in JavaScript
Preface The this pointer in JS has always been a ...
CSS removes the dotted border generated when clicking a link. Compatible with browsers that meet W3C standards
Part of the code: Copy code The code is as follow...