antdesign vue 上传拖动照片顺序
时间: 2023-10-09 22:16:38 浏览: 141
图片上传+拖动排序(vue2+elementUI+vuedraggable)
Ant Design Vue 的上传组件默认不支持拖动排序。如果需要实现该功能,可以参考以下步骤:
1. 在上传组件中添加一个列表组件,用于展示已上传的图片,并添加拖拽排序功能。可以使用 Vue.Draggable 插件来实现拖拽排序。
2. 在上传组件的 `before-upload` 钩子函数中,将上传的图片添加到列表组件中,并按照拖拽排序后的顺序重新设置列表组件的数据。
3. 在上传组件的 `remove` 钩子函数中,从列表组件中删除相应的图片。
以下是一个示例代码:
```
<template>
<div>
<a-upload
:before-upload="beforeUpload"
:on-remove="handleRemove"
>
<a-button>
<a-icon type="upload" /> Click to Upload
</a-button>
</a-upload>
<draggable v-model="images">
<div v-for="(image, index) in images" :key="image.url">
<img :src="image.url" />
</div>
</draggable>
</div>
</template>
<script>
import Draggable from 'vuedraggable'
export default {
components: {
Draggable
},
data() {
return {
images: []
}
},
methods: {
beforeUpload(file) {
const reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = () => {
this.images.push({
url: reader.result,
file: file
})
}
return false
},
handleRemove(file) {
this.images.splice(
this.images.findIndex(image => image.file === file),
1
)
}
}
}
</script>
```
阅读全文