vue 附件上传el-upload

embedded/2024/12/22 16:42:25/

废话不多说,直接上代码

<el-upload multiple action="#" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-change="handleChange":on-exceed="(fileList)=>{this.$message({type:'warning' , message : '已选数量超出上传限制,请重新选择'})}"accept=".jpg,.jpeg,.png,.bmp":auto-upload="false" :file-list="fileList" :limit="3" :class="fileList && fileList.length >= 3 ? 'hide' : 'show'"><i class="el-icon-plus"></i></el-upload>

预览用el-image

<div class="demo-image__preview" style="width: 80px;height: 80px;" ><el-image style="width: 80px;height: 80px;"  ref="previewImg" :preview-src-list="imageUrlList" :src="imageUrl"></el-image></div>

字段定义

confirmForm: {beizhu: '',mortgage_file: [],},fileList: [],imageUrlList: [],imageUrl: "",

附件图片上传

// 上传handleChange(file, fileList) {const isJPG = file.raw.type.indexOf("image") >= 0;const isLt3M = file.raw.size / 1024 / 1024 < 3;this.fileList = fileList;if (!isJPG) {this.fileList.forEach((item, index) => {if (item.name == file.name) {this.fileList.splice(index, 1)}})return this.$message.error("只能上传图片");}if (!isLt3M) {this.fileList.forEach((item, index) => {if (item.name == file.name) {this.fileList.splice(index, 1)}})return this.$message.error("图片大小不能超过 3MB!");}const form = new FormData();form.append("img", file.raw);let env = process.env.VUE_APP_MODE;if (env == "development") {form.append("secret_key","cLHasoJRXgR2TaQWbzUEzfCzl5y0qyiw16YZxV9x1tPGa7tpFUafETcLVBEkOWDo");form.append("phone", process.env.VUE_APP_IPHONE);form.append("password", process.env.VUE_APP_PASSWORD);}this.$post("/upload.php", form).then((res) => {if (res.data.code == 200) {this.imageUrl = res.data.file_path;const temp = {};temp.file_name = res.data.file_name;temp.file_path = res.data.file_path;temp.file_size = res.data.file_size;temp.file_ext = res.data.file_ext;this.confirmForm.mortgage_file.push(temp);}}).catch((err) => {});},

预览

handlePictureCardPreview(file) {console.log(file)	this.imageUrl = file.url;this.fileList.forEach(item => {this.imageUrlList.push(item.url)})this.$refs.previewImg.showViewer = true;},

删除

handleRemove(file) {this.imageUrl = "";// 1.获取将要删除图片的临时路径const filePath = file.file_path// 2.从pics数组中,找到图片对应的索引值const i = this.confirmForm.mortgage_file.findIndex(x => x.file_path === filePath)// 3.调用splice方法,移除图片信息setTimeout(() => {this.confirmForm.mortgage_file.splice(i, 1)this.fileList.splice(i, 1)}, 1000);console.log(this.confirmForm.mortgage_file)},

css

/deep/ .el-upload--picture-card{width: 80px !important;height: 80px !important;line-height: 80px !important;}/deep/ .el-upload-list--picture-card .el-upload-list__item{width: 80px !important;height: 80px !important;line-height: 80px !important;}/deep/ .el-form-item__error{left: 46px !important;}.hide   {/* position: relative; *//* padding-top: 20px;padding-left: 23px; */::v-deep {.el-upload--picture-card {display: none;}/* .el-upload-list__item {border: 0;border-radius: 0;margin:0 36px 0 0;} */}}

以上完事


http://www.ppmy.cn/embedded/93240.html

相关文章

WPF使用Iconfont字符串的操作方法

1.下载字体库文件 https://www.bootcss.com/p/font-awesome/ 2.放入Fonts文件夹下 3.文件属性修改为 资源 3.引入 FontFamily字体类型 <Setter Property"FontFamily" Value"../../CommonInMy/Fonts/#iconfont"/>注意这里的地址请填写绝对地址&…

vim编辑器的使用【vim常用指令介绍】

1.1 vim 简介 vim 编辑器最初是 vi 编辑器&#xff0c;vi 编辑器是 Unix 系统最初的编辑器。允许查看文件内容和在文件中移动、插入、编辑和替换文本。后来开发人员对它做了一些改进。并重命名为 vim。 1.2 学习 vim 的理由 因为几乎任何一个发行版都有 vi/vim 编辑器&#xf…

MySQL5.7之数据库初始化过程

文章目录 参考在执行这条命令后mysqld做了什么&#xff1f; 参考 本文章参考 https://dev.mysql.com/doc/refman/5.7/en/data-directory-initialization.htmlMySQL5.7源码安装 当通过tar包或者源码包安装完MySQL之后&#xff0c;需要执行数据目录初始化操作 ## 如果不指定--…

Vue 路由的hash模式和history模式有什么区别

在Vue.js框架中&#xff0c;路由管理是单页面应用&#xff08;SPA&#xff09;不可或缺的功能。Vue 路由提供了两种模式&#xff1a;hash模式和history模式&#xff0c;这两种模式主要负责处理URL的变更而无需重新加载整个页面&#xff0c;实现前端路由的功能。尽管它们的基本职…

什么是Docker | Docker入门及应用

1 Docker简介 1.1 什么是Docker Docker 是一个开源项目&#xff0c;诞生于 2013 年初&#xff0c;最初是 dotCloud 公司内部的一个业余项目。它基于 Google 公司推出的 Go 语言实现。 项目后来加入了 Linux 基金会&#xff0c;遵从了 Apache 2.0 协议&#xff0c;项目代码在 …

golang使用channel实现读写锁

package mainimport ("fmt""sync""time" )// RWLock 实现一个简单的读写锁 type RWLock struct {readerCount int // 当前正在读取的读者数量writerCount int // 当前正在写的写者数量readerChan chan struct{} // 用于控制读…

跟《经济学人》学英文:2024年08月03日这期 Britain’s railways go from one extreme to another

Britain’s railways go from one extreme to another Departing: privatisation. Destination: centralisation 出发:私有化。目的地:集中化 depart&#xff1a;出发 privatisation&#xff1a;美 [ˌpraɪvətaɪ’zeɪʃən] 私有化&#xff1b;民营化&#xff1b;私营化…

我在高职教STM32——I2C通信入门(3)

大家好,我是老耿,高职青椒一枚,一直从事单片机、嵌入式、物联网等课程的教学。对于高职的学生层次,同行应该都懂的,老师在课堂上教学几乎是没什么成就感的。正是如此,才有了借助CSDN平台寻求认同感和成就感的想法。在这里,我准备陆续把自己花了很多心思设计的教学课件分…