用户登录

除了可以用文件字段选择要上传的文件以外,我们还可以在界面上准备一个拖拽区域,用户可以直接把文件拖放到这个区域来选择要上传的图像文件。

下面我们可以在界面上准备一个这样的区域,打开 app 组件,在组件的模板里,找个地方,比如在这个文件元素的下面。添加一组 div,加上一个类,名字是 drag-zone , 里面包装一个 div ,在里面添加一行文字,把图像文件拖放到这里。

打开组件导入使用的样式,设计一下 drag-zone 这个类的样式,width 宽度是 360px,height 高度是 250px,background 背景颜色是 #f8f8f8,color,文字颜色可以用 #ababab。 font-size,字号是 24px。把 display 设置成 flex,再把 align-items 设置成 center,然后把 justify-content 也设置成 center 。

回到浏览器可以观察一下刚才添加的这个区域。

在电脑上找一张图像,把它拖到这个区域的上面,你会发现,现在鼠标指针会有一个加号,这是浏览器的默认行为。松开鼠标,会在新的标签打开这张图像。

下面我们需要改变一下浏览器的这个默认行为,在这个 drag-zone 元素的上面,绑定一个 dragover 事件,用一下 prevent,再绑定一个 drop 事件,用一下 prevent。

然后再回到浏览器测试一下,拖动一张图像,移动到这个区域,松开鼠标,这次就没有使用浏览器的默认的拖放行为了。

我们可以处理一下在元素上发生的这个 drop 事件,用 onDropDragZone 这个方法处理 drop 事件。

在组件的方法里要定义一个新的方法,方法的名字是 onDropDragZone,事件的处理器默认接收一个 event 参数。在这个 event 对象里,我们可以找到被拖放的文件。它是在 dataTransfer 里的 files 这个属性里面。把它输出到控制台上检查一下。

再去测试一下,把一张图像拖放到这个区域的上面,发生了 drop 事件以后,会在控制台上输出被拖放的文件。 回来再处理一下这个方法。

声明一个 file ,它的值就是 event.dataTransfer.files 里的 0 。也就是得到第一个被拖放的文件。

下面判断一下,如果有 file,就把组件的 file 这个数据的值设置成这个 file。 下面可以再设置一下内容标题,this.title 等于 file.name.split ,给它一个点,访问第一个项目。

然后再生成一个预览图像,这里可以用一下组件里的 createImagePreview 方法,把 file 交给这个方法。

最后再到浏览器上预览一下。把一张图像拖放到这个区域上。发生 drop 事件以后,会设置内容的标题,还会生成一个预览图像。

这个效果跟直接使用 选择文件 字段选择文件是一样的。

使用拖拽的方式选择要上传的文件(dragover, drop)《 Vue.js 前端应用 #11:上传文件 》

统计

13052
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点