vue实现拖拽或点击上传图片 vue实现拖拽或点击上传图片

本文实例为大家分享了vue实现拖拽或点击上传图片的具体代码，供大家参考，具体内容如下
一、预览图
文章图片

文章图片

二、实现点击上传思路：将input的type设置为“file”类型即可上传文件。隐藏该input框，同时点击按钮时，调取该input的点击上传功能。剩下的就是css优化页面了。
拖拽上传思路：通过给拖拽框dropbox绑定拖拽事件，当组件销毁时解绑事件。在拖拽结束，通过event.dataTransfer.files获取上传的文件信息。然后在对文件进行上传服务器操作。
接下来请允许我简单介绍一下各个组件：
【vue实现拖拽或点击上传图片】upload.vue封装了点击上传的逻辑,而进度条则没有做，后期可基于percent做参数继续完善进度条；uploadFormDialog.vue是父盒子，即点击上传按钮后弹出的对话框，在该组件中需要完成页面的布局，拖拽上传等逻辑；
这样封装的意义是为了使得代码更便于维护。
upload.vue 点击上传组件

.file-selector {.selector-btn {&:hover {background-color: rgba($color: #2976e6, $alpha: 0.8); transition: background 180ms; }}&-input {display: none; }}

uploadFormDialog.vue 上传对话框

.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; }}

注：以上代码用到了我们自己封装的组件库和自己封装的一些方法，请根据具体场景进行相关的修改。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。