基于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>

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

vue+element实现图片上传及裁剪功能（vue-cropper）
需求背景: 上传图片或者头像时,能够将图片进行裁剪(等比例缩放裁剪或非等比例裁剪) 效果图: 安装使用 1.安装 npm install vue-cropper // npm 安装 yarn add ...
think php上传图片,基于ThinkPHP5.0实现图片上传插件
这篇文章主要介绍了关于基于ThinkPHP5.0实现图片上传插件,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 thinkphp5.0 图片上传插件可预览裁剪图片和保存原图片,执行裁剪 ...
用Vue来实现图片上传多种方式
项目中需要上传图片可谓是经常遇到的需求,本文将介绍 3 种不同的图片上传方式,在这总结分享一下,有什么建议或者意见,请大家踊跃提出来. 没有业务场景的功能都是耍流氓,那么我们先来模拟一个需要实现的业务 ...
拖拽文件夹上传一（基于Vue的文件夹上传组件）
前言首先说一下,小弟第一次写文章,如果有什么错误还望小哥哥小姐姐多多包涵.如果有什么缺陷还望大家指出来让小弟多学习. 内容划分上传文件夹一共分两部分来写一方面怕太长了大家看五分钟就不想看 ...
vue 实现压缩图片上传到oss
我们偶尔会在项目中碰到上传的需求,对于部分前端开发人员来说,上传资源是一个比较头疼的事情,你要根据各种不同的UI设计,设计出相应的上传页面样式,上传的地址不一样,可能你的处理就会不一样.你可能选择使用 ...
vue移动端图片上传
一.服务端环境准备本文服务端主要为nodejs,利用multer中间件完成图片上传功能.服务端安装express框架和multer. npm install express --save npm i ...
java图片加水印上传工具类_基于Spring Boot实现图片上传/加水印一把梭操作
文章共537字,阅读大约需要 2分钟 ! 概述很多网站的图片为了版权考虑都加有水印,尤其是那些图片类网站.自己正好最近和图片打交道比较多,因此就探索了一番基于 Spring Boot这把利器来实现从 ...
vue element 单张图片上传，删除，预览
功能点: 点击'查看图片'按钮,弹窗中会展示图片,第一次看到的图片是从父组件传过来的图片,点击删除按钮,调取删除接口删除图片,在重新上传图片,data中放入列表那一项的数据,上传成功,图片需要回显,此 ...
el-element照片墙，upload图片上传
效果: 官方文档示例注解: list-type:上传之后,图片的显示类型,有三种text.picture.picture-card. --text类型显示为文本类型,预览时不能看到上传的图片-- p ...

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

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

最新文章

热门文章