基于vue+el-upload图片上传(自用屎山)

一份屎山版的图片上传

<template><!--图片上传个数 max图片预上传列表 fileList图片上传和回显容器 upLoadListref提交图片的方法 submitHandler--><div style="display: flex"><div><draggable:list="fileList":disabled="!enabled"class="list-group myImgList"ghost-class="ghost":move="checkMove"@start="dragging = true"@end="dragging = false":animation="500"><div class="list-group-item smallImg" v-for="element in fileList" :key="element.name"><el-image :src="element.url" style="border-radius: 5px" :preview-src-list="[element.url]"/><span class="el-icon-circle-close" @click="upLoadRemove(element,fileList)"></span></div></draggable></div><div><el-upload:limit="max"class="picture-cardimgs imageUrls":on-preview="handlePictureCardPreview":auto-upload="false"multipleaction="#":on-change="uploadChange":on-remove="upLoadRemove":on-exceed="handleExceed":file-list="fileList"list-type="picture-card":show-file-list="false"><el-dialog :visible.sync="dialogImg" :modal="false"><img width="100%" :src="dialogImageUrl" alt=""></el-dialog><div slot="trigger" class="imageUrlsAdd"><i class="el-icon-plus"></i></div></el-upload></div><div><el-button size="mini" type="primary" @click="submitHandler" style="margin: 25px 0 0 10px">确 定</el-button></div></div></template><script>import { uploadKodoApi } from '@/api/system/afterSale'import draggable from 'vuedraggable'export default {components: { draggable },props: {max: {type: Number,// 类型required: false,//必填default: 5//默认值},upLoadList: {type: Array,// 类型required: false,//必填default: () => {}//默认值}},data() {return {//拖拽相关enabled: true,dragging: false,// 图片相关fileList: this.upLoadList,dialogImageUrl: [],dialogImg: false,}},methods: {//拖拽checkMove: function(e) {window.console.log('Future index: ' + e.draggedContext.futureIndex)},//===============图片上传==============// 移除附件upLoadRemove(file, fileList) {let tempFileList = []for (var index = 0; index < fileList.length; index++) {if (this.fileList[index].name !== file.name) {tempFileList.push(this.fileList[index])}}this.fileList = tempFileList},handlePictureCardPreview(file) {this.dialogImageUrl = file.urlthis.dialogImg = true},// 监控上传文件列表uploadChange(file, fileList) {let existFile = fileList.slice(0, fileList.length - 1).find((f) => f.name === file.name)if (existFile) {this.$message.error('当前文件已经存在!')fileList.pop()}this.fileList = fileList},// :on-exceed="handleExceed"// 选取文件超过数量提示handleExceed(files, fileList) {this.$message.warning(`限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)},// 上传图片到服务器 formidable接收async submitUpload() {let formData = new FormData()this.fileList.forEach((item) => {formData.append('files', item.raw)})try {let result = await uploadKodoApi(formData) // 图片console.log('图片列表', result.data)this.$emit('update:upLoadList',result.data)} catch (error) {}},// 上传submitHandler() {//this.submitUpload()},},watch: {dialogImg: {handler(nval, oval) {console.log('dialogImg', nval)}, deep: true, immediate: true},dialogImageUrl: {handler(nval, oval) {console.log('dialogImageUrl', nval)}, deep: true, immediate: true},fileList: {handler(nval, oval) {console.log('fileList', nval)}, deep: true, immediate: true},upLoadList: {handler(nval, oval) {console.log('upLoadList', nval)}, deep: true, immediate: true}}}</script><style scoped>/*列表样式*/.myImgList {display: flex;}/*展示图样式*/.smallImg {width: 60px;height: 60px;position: relative;margin-left: 3px;margin-right: 3px;}.smallImg span {display: none;}.smallImg:hover span {display: block;position: absolute;right: 0;top: 5px;}/* 图片上传*/>>> .imageUrls .el-upload-list__item {width: 60px;height: 60px;}>>> .imageUrls .el-upload-dragger {height: 60px;width: 60px;}>>> .imageUrls .el-upload--picture-card {margin-top: 10px;height: 60px;width: 60px;}>>> .imageUrls .el-upload__text {}/*添加图片 加号*/.imageUrlsAdd {display: flex;justify-content: center;align-items: center;height: 100%;line-height: 60px;}</style>