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

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

一、预览图

二、实现

点击上传思路：将input的type设置为“file”类型即可上传文件。隐藏该input框，同时点击按钮时，调取该input的点击上传功能。剩下的就是css优化页面了。

拖拽上传思路：通过给拖拽框dropbox绑定拖拽事件，当组件销毁时解绑事件。在拖拽结束，通过event.dataTransfer.files获取上传的文件信息。然后在对文件进行上传服务器操作。

接下来请允许我简单介绍一下各个组件：

upload.vue封装了点击上传的逻辑,而进度条则没有做，后期可基于percent做参数继续完善进度条；uploadFormDialog.vue是父盒子，即点击上传按钮后弹出的对话框，在该组件中需要完成页面的布局，拖拽上传等逻辑；

这样封装的意义是为了使得代码更便于维护。

upload.vue 点击上传组件

uploadFormDialog.vue 上传对话框

注：以上代码用到了我们自己封装的组件库和自己封装的一些方法，请根据具体场景进行相关的修改。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。