vue结合Dropzone实现多图拖拽上传

vue结合Dropzone实现多图拖拽上传

最近针对问答功能做了一个提问模态框,实现了点击和拖拽上传多张图片,如图所示,在这里讲解一下是如何实现的。

TIM图片20180113152509.png

首先将拖拽上传图片的核心插件Dropzone引入到vue组件。

Dropzone(options)接受两个参数,参数1传入一个dom对象来指定的拖拽区域,参数2是处理上传图片方式的function。

Dropzone内部阻止了拖拽图片直接放入文档对象的默认事件,并且监听了drop事件,在drop触发后会验证文件格式看是不是图片,并遍历拖拽的图片数量,再逐一执行给定的upload方法,达到上传多张图片的目的。

TIM图片20180113154831.png

在mounted钩子函数中调用Dropzone方法,传入拖拽dom以及我们自定义的dragDropUpload方法。

拖拽dom不必多说,就是拖拽区域而已。dragDropUpload方法我们只限制了上传图片的数量不能超过三张,在符合要求的条件下就会回调_upload方法来发送上传图片的请求。

_upload方法首先是获取获取api,并且给出后台需要的formdata对象和请求头类型,向后台发送请求成功又接受后台返回的图片数据并且渲染出来。

拖拽上传的实现步骤以及方法大致就是这样。

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容