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

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

一、预览图

vue实现拖拽或点击上传图片_第1张图片

vue实现拖拽或点击上传图片_第2张图片

二、实现

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

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

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

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

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

upload.vue 点击上传组件



uploadFormDialog.vue 上传对话框




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

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

你可能感兴趣的