vue 拖拽图片上传
时间: 2023-11-09 13:02:07 浏览: 39
可以使用 vue-drag-drop-upload 插件来实现拖拽上传图片的功能。该插件支持拖拽上传多张图片,并且可以设置上传的文件类型和大小限制。
使用步骤如下:
1. 安装 vue-drag-drop-upload 插件:
```
npm install vue-drag-drop-upload --save
```
2. 在组件中引入插件并注册:
```javascript
import VueDragDropUpload from 'vue-drag-drop-upload'
export default {
components: {
VueDragDropUpload
}
}
```
3. 在模板中使用插件:
```html
<vue-drag-drop-upload
:url="uploadUrl"
:headers="uploadHeaders"
:data="uploadData"
:multiple="true"
:accept="'image/*'"
:max-size="1024 * 1024 * 2"
@uploaded="onUploaded"
>
<div class="dropzone">
<p>将图片拖到此处或点击上传</p>
</div>
</vue-drag-drop-upload>
```
其中,`uploadUrl` 是上传图片的接口地址,`uploadHeaders` 是上传图片时需要携带的请求头,`uploadData` 是上传图片时需要携带的其他数据,`multiple` 表示是否支持多张图片上传,`accept` 表示允许上传的文件类型,`max-size` 表示允许上传的文件大小上限,`uploaded` 是上传成功后的回调函数。
4. 在组件中定义 `onUploaded` 方法:
```javascript
methods: {
onUploaded(response) {
// 处理上传成功后的响应数据
}
}
```