话不多说,上代码,没安vuedraggable的小伙伴们自行安装一下
npm install vuedraggable
具体实现:
<template>
<div>
<el-upload
:before-upload="handleBeforeUpload"
:on-change="handleChange"
multiple
action="">
<el-button>选择图片</el-button>
</el-upload>
<div class="image-list">
<draggable v-model="imageList" @end="handleDragEnd">
<div v-for="(image, index) in imageList" :key="index" class="image-item">
<img width="200px" height="150px" :src="image.url" alt="Image" @click="handleImageClick(index)"/>
</div>
</draggable>
</div>
<el-button @click="handleUpload">上传</el-button>
<el-image-viewer
v-if="viewerVisible"
:on-close="closeViewer"
:url-list="getImageShowList"
:initial-index="currentIndex"/>
</div>
</template>
<script>
import draggable from 'vuedraggable';
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
components: {
draggable,
ElImageViewer
},
data() {
return {
fileList: [], // 选择的文件列表
imageList: [], // 图片列表
viewerVisible: false, // 预览框可见性
currentIndex: 0 // 预览图片的索引
};
},
computed:{
getImageShowList(){
return this.imageList.map(image => image.url);
}
},
methods: {
handleBeforeUpload(file) {
// 添加文件到选择的文件列表
this.fileList.push(file);
return false; // 阻止自动上传
},
handleChange(file, fileList) {
debugger;
// 更新图片列表
this.imageList.push({
url: URL.createObjectURL(file.raw),
file: file
});
},
handleDragEnd() {
// 拖动结束时更新文件列表顺序
this.fileList = this.imageList.map(image => image.file);
debugger;
},
handleUpload() {
// 上传所有图片 这里只做了打印,具体上传逻辑请自行实现
this.fileList.forEach(file => {
// 使用你的上传逻辑,例如发送请求到后端进行上传
console.log('Uploading file:', file);
});
},
// 点击图片时显示原图
handleImageClick(index) {
// 点击图片时显示原图
this.currentIndex = index;
this.viewerVisible = true;
},
// 关闭预览
closeViewer() {
this.viewerVisible = false;
}
}
};
</script>
<style>
.image-list {
display: flex;
flex-wrap: nowrap;
}
.image-item {
display: inline-block;
margin-right: 10px;
}
</style>
简单的效果图如下:
控制了下图片显示的大小,另支持点击预览功能,又新认识了个很好用的组件:El-ImageViewer。