vue实现拖拽或点击上传图片
作者：你的小余童鞋
这篇文章主要为大家详细介绍了vue实现拖拽或点击上传图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue实现拖拽或点击上传图片的具体代码，供大家参考，具体内容如下
一、预览图
二、实现
点击上传思路：将input的type设置为“file”类型即可上传文件。隐藏该input框，同时点击按钮时，调取该input的点击上传功能。剩下的就是css优化页面了。
拖拽上传思路：通过给拖拽框dropbox绑定拖拽事件，当组件销毁时解绑事件。在拖拽结束，通过event.dataTransfer.files获取上传的文件信息。然后在对文件进行上传服务器操作。
接下来请允许我简单介绍一下各个组件：
upload.vue封装了点击上传的逻辑,而进度条则没有做，后期可基于percent做参数继续完善进度条；uploadFormDialog.vue是父盒子，即点击上传按钮后弹出的对话框，在该组件中需要完成页面的布局，拖拽上传等逻辑；
这样封装的意义是为了使得代码更便于维护。
upload.vue 点击上传组件
<template>
<!--upload.vue 点击上传组件 -->
<div class="file-selector">
<z-btn class="selector-btn" color="primary" @click="handleUpClick">
选择文件
</z-btn>
<input
ref="input"
class="file-selector-input"
type="file"
:multiple="multiple"
:accept="accept"
@change="handleFiles"
/>
</div>
</template>
<script>
import {debounce} from 'lodash/function';
export default {
data() {
return {
accept: '.jpg,.jpeg,.png,.gif',
multiple: false,
list: [], // 已选择的文件对象
uploadFinished: true, // 上传状态
startIndex: 0, // 开始上传的下标，用于追加文件
maxSize: 10 * 1024 * 1024, //10M(size单位为byte)
// source: this.$axios.CancelToken.source(), // axios 取消请求
};
},
methods: {
// 重置
reset() {
this.list = [];
this.source.cancel();
this.startIndex = 0;
this.uploadFinished = true;
this.$refs.input && (this.$refs.input.value = null);
},
// 调用上传功能
handleUpClick: debounce(function () {
// 可在此维护一个上传状态，上传过程中禁用上传按钮
// if (!this.uploadFinished) this.$message.info('即将覆盖之前的文件~');
this.$refs.input.click();
}, 300),
handleFiles(e) {
const files = e?.target?.files;
this.readFiles(files);
},
// 上传之前将文件处理为对象
readFiles(files) {
if (!files || files.length <= 0) {
return;
}
for (const file of files) {
const url = window.URL.createObjectURL(file);
const obj = {
title: file.name.replace(/(.*\/)*([^.]+).*/ig, '$2'), // 去掉文件后缀
url,
file,
fileType: file.type,
status: 0, // 状态 -> 0 等待中，1 完成， 2 正在上传，3 上传失败
percent: 0, // 上传进度
};
// 提前在 data 中定义 list，用来保存需要上传的文件
this.list.unshift(obj);
this.$emit('fileList', this.list);
}
// 在 data 中定义 startIndex 初始值为 0，上传完成后更新，用于追加上传文件
// this.startUpload(this.startIndex);
},
}
};
</script>
<style lang="scss">
.file-selector {
.selector-btn {
&:hover {
background-color: rgba($color: #2976e6, $alpha: 0.8);
transition: background 180ms;
}
}
&-input {
display: none;
}
}
</style>
uploadFormDialog.vue 上传对话框
<template>
<!-- 上传dialog -->
<form-dialog
v-model="$attrs.value"
:title="title"
persistent
:loading="loading"
maxWidth="600px"
min-height='400px'
@cancel="handleCancle"
@confirm="handleSubmit"
>
<div
class="d-flex flex-row justify-space-between">
<z-form style='width: 260px; height: 100%;'>
<form-item label="图片名称" required>
<z-text-field
v-model="formData.name"
outlined
:rules="rules"
:disabled='disabled'
placeholder="请输入图片名称"
>
</z-text-field>
</form-item>
<form-item label="描述" required>
<z-textarea
v-model="formData.description"
outlined
:disabled='disabled'
placeholder="请输入描述"
style="resize: none;"
>
</z-textarea>
</form-item>
</z-form>
<div ref="pickerArea" class="rightBox">
<div class="uploadInputs d-flex flex-column justify-center align-center" :class="[ dragging ? 'dragging' : '']">
<div ref="uploadBg" class="uploadBg my-2"></div>
<upload
ref="uploadBtn"
@fileList='fileList'
></upload>
<div class="tip mt-2">点击上传按钮，或拖拽文件到框内上传</div>
<div class="tinyTip ">请选择不大于 10M 的文件</div>
</div>
</div>
</div>
</form-dialog>
</template>
<script >
import {debounce} from 'lodash/function';
import upload from './upload';
import {uploadImage} from '@/wv-main-admin/apis/image';
export default {
components: {
upload
},
props: ['dialogData'],
data() {
return {
dialogFlag: '',
title: '新增/编辑图片',
loading: false,
formData: {
name: '',
description: ''
},
disabled: false,
rules: [v => !!v || '必填'],
data: {},
dragging: true, //是否拖拽
bindDrop: false,
fileInfo: {},
};
},
mounted() {
},
beforeDestroy() {
// 组件销毁前解绑拖拽事件
try {
const dropbox = this.$refs.pickerArea;
dropbox.removeEventListener('drop', this.handleDrop);
dropbox.removeEventListener('dragleave', this.handleDragLeave);
dropbox.removeEventListener('dragover', this.handleDragOver);
this.bindDrop = false;
} catch (e) { console.log(e, '======我是组件销毁前解绑拖拽事件的异常'); }
},
methods: {
//取消
handleCancle() {
// 关闭当前弹框
this.$emit('input', false);
// 强制组件刷新
this.$forceUpdate();
},
handleSubmit: debounce(function () {
// 上传单个文件
const flag = this.checkMustsItem();
if (flag) {
this.startUpload();
// 上传完成，强制组件刷新
this.$forceUpdate();
}
}, 300),
//监听子组件的值
fileList(data) {
this.fileInfo = data[0];
this.formData.name = this.fileInfo.title;
const uploadBg = this.$refs.uploadBg;
//改变背景图片
uploadBg.style.backgroundImage = `url(${this.fileInfo.url})`;
},
bindEvents() {
const dropbox = this.$refs.pickerArea;
// 防止重复绑定事件，需要在 data 中初始化 bindDrop 为 false
if (!dropbox || this.bindDrop) { return; }
// 绑定拖拽事件，在组件销毁时解绑
dropbox.addEventListener('drop', this.handleDrop, false);
dropbox.addEventListener('dragleave', this.handleDragLeave);
dropbox.addEventListener('dragover', this.handleDragOver);
this.bindDrop = true;
},
// 拖拽到上传区域
handleDragOver(e) {
e.stopPropagation();
e.preventDefault();
this.dragging = true;
},
// 离开上传区域
handleDragLeave(e) {
e.stopPropagation();
e.preventDefault();
this.dragging = false;
},
// 拖拽结束
handleDrop(e) {
e.stopPropagation();
e.preventDefault();
this.dragging = false;
const files = e.dataTransfer.files;
// 调用 <upload/> 组件的上传功能
this.$refs.uploadBtn && this.$refs.uploadBtn.readFiles(files);
},
// 上传前需要校验文件
checkFile(index) {
const file = this.list[index];
// 如果文件不存在，即全部文件上传完成
if (!file) {
// 上传完成，向父组件抛出 success 事件
this.uploadFinished = true;
this.$emit('success', this.list);
// 清空上传控件中的值，保证 change 事件能正常触发
this.$refs.input.value = null; this.startIndex = index > 1 ? index - 1 : 0;
return false;
}
// 校验是否已上传
if (`${file.status}` === '1') {
this.startUpload(++index);
return false;
}
// 校验文件大小
if (this.maxSize && file.file && file.file.size >= this.maxSize) {
this.startUpload(++index);
return false;
}
return true;
},
checkMustsItem() {
if (!this.fileInfo.file) {
this.$message.warning('请上传文件！');
return false;
} if (!this.formData.name) {
this.$message.warning('请输入文件名称！');
return false;
} if (!this.formData.description) {
this.$message.warning('请输入文件描述！');
return false;
}
return true;
},
// 上传单个文件
startUpload() {
this.loading = true;
const params = {
type: 'image'
};
this.$set(params, 'file', this.fileInfo.file);
this.$set(params, 'name', this.formData.name);
this.$set(params, 'description', this.formData.description);
uploadImage(params)
.then(res => {
this.loading = false;
if (res.code === 0) {
this.$message.success('上传成功~');
this.$emit('refreshList', false);
this.$emit('input', false);
}
})
.catch(() => {
this.loading = false;
});
// this.$axios({
// url: this.url, // 上传接口，由 props 传入
// method: 'post',
// data,
// withCredentials: true,
// cancelToken: this.source.token, // 用于取消接口请求
// // 进度条
// onUploadProgress: e => {
// if (fileObj.status === 1) { return; } // 已上传
// // 限定最大值为 99%
// const p = parseInt((e.loaded / e.total) * 99);
// if (e.total) {
// fileObj.status = 2; // 正在上传
// fileObj.percent = p; // 更新上传进度
// } else {
// fileObj.status = 3; // 上传失败
// }
// },
// })
// .then(response => {
// if (`${response.code}` === '200') {
// fileObj.status = 1;
// fileObj.percent = 100;
// } else {
// fileObj.status = 3;
// }
// })
// .catch(e => {
// console.log(e, '====error');
// fileObj.status = 3;
// })
// .finally(e => {
// console.log(e, '====error');
// this.startUpload(++index);
// });
// 上传完成
},
},
};
</script>
<style lang='scss' scoped>
.rightBox {
width: 260px;
height: 250px;
border: 1px solid #ccc;
margin-top: 18px;
.uploadBg {
width: 150px;
height: 125px;
background: url("../../../../assets/upload.png") no-repeat center center;
background-size: contain;
}
.tip {
font-size: 13px;
color: rgba(0, 0, 0, 0.87);
}
.tinyTip {
font-size: 12px;
color: #8e8f9e;
}
}
</style>
注：以上代码用到了我们自己封装的组件库和自己封装的一些方法，请根据具体场景进行相关的修改。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。