摘要：当拖动的元素或文本选择离开有效的放置目标时，会触发此事件。以及对象在拖放交互期间传输的数据。
17-3-2更新： 谢谢@mengdu 补充的关于图片预览的另一种更简单方法 URL.createObjectURL()，具体在文章里补充
之前用Vue做了一个基础的组件vue-img-inputer，下面就叫vii，记录下在开发过程中遇到的知识点（都算比较基础，具体代码不会贴太多，都可以在项目仓库里看到）。
上传文件很多项目都要用到，一些组件库里(ele/iview...)文件上传组件都是做成了标配，虽然vii和uploader定位还是有些差别，但实现上都有几个共同要点：
先上demo样子要好看点
图片/文件选择后预览
实现拖拽选择文件
图片选择后执行某些动作（譬如uploader的上传等）
注： 下面有些地方会有些啰嗦，请选择观看
基础首先我们有个文件选择框，恩，长这样：
好丑啊！！我们来让它变好看点：
第一个方法：修改自身CSS这里有一个shadowDOM的概念，简单的来说就是我们经常用到的一些HTML标准组件（例如viedo，甚至滚动条）其实是由若干个更基础的DOM由浏览器封装成的，使得我们调用只要一个标签就够了，这类也就是WebComponent，这里具体不展开了。我们先来看下file-input的内部是如何的（chrome devtool不设置是看不到的）：
所以呢，这个隐藏在革命碉堡里的button就是我们直接修改file-input样式但是却去不掉丑按钮的元凶！！
解决思路的：我们要么把按钮移出视线，要么就用这个按钮修改其样式。
这里就修改下里面这个type=button的样式，只提供个思路，代码：
有没有想到chrome修改滚动条样式呢？哈哈，其实是一个道理，现在file-input变这样了：
好像挺简单！然而我们看到-webkit-就应该知道兼容性了，这种方法只有safari和chrome笑笑，其他GG，所以自然不能这么干。
第二个方法：给file-input找个替身是这样，我们可以可以把file-input整个移出视线，再找个找几个元素，通过点击这些个元素来代理原file-input的点击，呼出文件选择框呢？
自然是可以的，label标注标签, 给label一个for属性指向input的唯一id，这样点击label就相当于点击input, 所以我们可以这么写：
.box {
position: relative;
}
input {
position: absolute;
left: -9999px;
}
/* 使label充满整个box*/
label {
position: absolute;
top: 0;left: 0;right: 0;bottom: 0;
z-index: 10; /* 这个z-index之后说到*/
}
这样子做之后，就有一个组件的影子了，其中
因为label充满了整个box，所以点击box就可以选择文件
同时有了box，可以往里面填充任何元素，譬如一个icon
:)
好了，基础基本上啰嗦完了，正式进入vue的实现(Vue 2.x)：
文件选择的处理这块讲文件数据的获取和处理:
v-model如果问你vue里你想要组件绑定一个输入值的最粗暴的方式是什么？v-model啊！但是这条指令其实是一个语法糖：
...
// 给个img来承担预览工作就行了
...
当然了，这东西的兼容性有点捉鸡: IE10+, 移动端可以快乐的使用。
URL.createObjectURL文档在这，这个方法其实很直观，唯一需要注意的是对临时路径的销毁，来看下代码：
...
imgPreview (file) {
let self = this;
// 看支持不支持FileReader
if (!file || !URL.createObjectURL) return;
if (/^image/.test(file.type)) {
// 创建一个reader
let this.dataUrl = URL.createObjectURL(file)
}
},
handleFileChange (e) {
// 每次重新选择都需要进行对上一次的销毁
this.dataUrl && URL.revokeObjectURL(dataUrl)
...
this.file = inputDOM.files[0];
...
// 在获取到文件对象进行预览就行了！
this.imgPreview(this.file);
...
}
...
代码一下子少了几行直观了不少哈哈哈，兼容性也是IE10+， 移动端安卓4.0+，safari6.0+
预览就这么完成了，下一个我们来说拖拽！
拖拽选择拖拽说白了就是一个事件监听，drop事件，我们从头开始说起
浏览器拖拽事件首先，放DragEVent的MDN文档，重点是下面四个事件及解释：
dragenter
当拖动的元素或选择文本输入有效的放置目标时，会触发此事件。dragleave
当拖动的元素或文本选择离开有效的放置目标时，会触发此事件。dragover
当将元素或文本选择拖动到有效放置目标（每几百毫秒）上时，会触发此事件。drop
当在有效放置目标上放置元素或选择文本时触发此事件。
以及dataTransfer对象：在拖放交互期间传输的数据。
获取方法： event.dataTransfer
为什么要关注着几个呢？因为浏览器是自身监听这几个拖放事件的！！譬如你把图片或者pdf拖进浏览器里。浏览器是会试图打开这个文件的，所以我们要干掉默认行为，很简单e.preventDefault()：
...
methods: {
preventDefaultEvent (eventName) {
document.addEventListener(eventName, function (e) {
e.preventDefault();
}, false)
},
},
mounted () {
// 阻止浏览器默认的拖拽时事件，测试阻止这几个就够了，不放心就全阻止一遍吧
["dragleave", "drop", "dragenter", "dragover"].forEach(e => {
this.preventDefaultEvent(e);
});
}
...
做完这一步，我们只需监听目标上的drop事件就行了，稍微改造下代码：
...
其实到这里重要的点都讲了，接下来说些其他的
上传uploader的话选择完图片在handleFileChange里直接执行个请求上传
在父组件里获取值该怎么传怎么传
其他一些东西当页面中需要多个inputer时，同一个input的id会冲突，所以不指定的情况下需要个唯一id：
...vue
...
input原本可以指定接收的文件格式，会在选择框出来的时候默认无法选择非指定格式的文件
移动端允许拍照选择
最后
暂时就这么多了，完整的源码在这里
有任何讲的不对不好的地方请大力指正！
顺便打下广告，喜欢就不妨star下vue-img-inputer吧！
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/81791.html
摘要：老姚浅谈怎么学鉴于时不时，有同学私信问我老姚，下同怎么学前端的问题。撸码听歌，全局控制。 浅析用 js 解析 xml 的方法 由于项目上需要解析 xml，于是各种百度，然后自己总结了下各个主流浏览器解析 xml 的方法，只能是很浅显的知道他的用法，但是还没有深层次的研究。 装 X - 建立自己的斗图网站库 之前加过一个斗图群，看到很多经典的表情，然后就收藏到了 QQ， 迫于本屌丝开不起...
摘要：网址功能单图多图上传图片上传预览上传进度条分组上传，分组查询新建分组，删除分组删除图片选择图片目录结构前端利用搭建，中引入子组件。实现分组的新增查询删除。利用模块实现删除文件功能。 公司要写一些为自身业务量身定制的的组件，要基于Vue,写完后扩展了一下功能，选择写图片上传是因为自己之前一直对这个功能比较迷糊，所以这次好好了解了一下。演示在网址打开后的show.gif中。 使用技术：Vu...
摘要：，至此咱们的微信小程序的简单使用及了解算是分享完了，毕竟个人也是道行有限，没有钻研太深，这些只是本人在实际项目开发过程中用到和总结的经验，有太多不足或不对的地方，希望大家多多给予指出与改正，咱们一起来共同学习与进步 微信小程序是一种不需要下载安装即可使用的应用，在国内它在企业推广中的受欢迎度以及就这两年的使用及普及热度，然而就是因为它的备受欢迎度以及越来越被企业所重视，也就形成了咱们开...
摘要：，至此咱们的微信小程序的简单使用及了解算是分享完了，毕竟个人也是道行有限，没有钻研太深，这些只是本人在实际项目开发过程中用到和总结的经验，有太多不足或不对的地方，希望大家多多给予指出与改正，咱们一起来共同学习与进步 微信小程序是一种不需要下载安装即可使用的应用，在国内它在企业推广中的受欢迎度以及就这两年的使用及普及热度，然而就是因为它的备受欢迎度以及越来越被企业所重视，也就形成了咱们开...
摘要：，至此咱们的微信小程序的简单使用及了解算是分享完了，毕竟个人也是道行有限，没有钻研太深，这些只是本人在实际项目开发过程中用到和总结的经验，有太多不足或不对的地方，希望大家多多给予指出与改正，咱们一起来共同学习与进步 微信小程序是一种不需要下载安装即可使用的应用，在国内它在企业推广中的受欢迎度以及就这两年的使用及普及热度，然而就是因为它的备受欢迎度以及越来越被企业所重视，也就形成了咱们开...
阅读 2113·2019-08-30 15:53
阅读 2297·2019-08-30 12:54
阅读 1013·2019-08-29 16:09
阅读 620·2019-08-29 12:14
阅读 644·2019-08-26 10:33
阅读 2271·2019-08-23 18:36
阅读 2794·2019-08-23 18:30
阅读 1979·2019-08-22 17:09
