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

下面我们可以在界面上准备一个这样的区域，打开 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 事件以后，会设置内容的标题，还会生成一个预览图像。

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