记录基于elementUI一个自定义上传图片的小功能

哈喽，这里是今天不写bug的平平，00后程序媛本媛，上班写bug下班改bug的平平(Senior)刚刚进入实习阶段，此次记录一下在项目中遇到的一个小问题，自定义上传图片小功能的一些坑~

首先先跟我一起进入【平平改bug】的剧情里叭 ~ 啾咪~~

第一幕

平平在使用elementUI做只能上传一张图片上传图片功能按钮的时候发现，普通的默认上传无法正确支持支持正确请求接口完成图片的上传，于是平平决定使用自定义上传的方式…

// 主要代码
<el-upload size="small" class="upload-demo" action="#" :headers="uploadProHeader"
:http-request="handleMiniUpload"
:before-upload="beforeMiniUpload"
:on-remove="deleteMiniproImg"
:on-change="uploadMiniChange" list-type="picture">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload-tip el-upload-tip--small">
请上传小于2MB的png/jpg/jpeg图片，建议尺寸520*416
</div></el-upload>......methods: {// 图片格式进行校验提示，大小不能超过2MbeforeMiniUpload (file) {const types = ['image/jpeg', 'image/jpg', 'image/png']const testmsg = types.includes(file.type)const isLt10M = file.size < 1024 * 1024 * 2if (!testmsg) {this.$message.error('上传图片格式不支持!')return false}if (!isLt10M) {this.$message.error('上传图片大小不能超过2MB!')this.deleteMiniproImg()return false}},// 做上传动作，取得上传成功后接口返回的数据handleMiniUpload (params) {const file = params.filevar formData = new FormData()formData.append('file', file)serviceMessageApi.uploadImg(this.$route.params.appid, formData).then(res => {if (+res.code === 0) {...... // 取得接口我们所需要的数据}})},// 删除图片之后把对应数据删除deleteMiniproImg () {...},}

第二幕

做完这些，平平发现，当用户上传一张图片后，如果想再传一张图片，依然能够上传成功，并显示在页面上，尽管这样存储的是最后一次上传的图片，但是这样用户的使用体验感很差，这可不行丫！

第三幕

该怎么办呢？这必须要把存储图片文件做一个限制丫~ 平平想翻开elementUI开发文档后，平平发现了limit这个组件参数

于是平平添加关键字limit=“1”,对图片上传进行了限制

可是这样问题真的解决了嘛？

第四幕

答案是否定的，虽然但是，这样并不能解决问题。于是，平平拿出了必杀技

uploadMiniChange (file, fileList) {if (fileList.length > 1) {fileList.splice(0, 1)}
}

终于，this bug 被KO~~.

最后啦，希望看到我每篇文章的小伙伴们，都能如愿以偿，同时对我这个菜鸟多一点包容和期待。未来，拥抱一颗初心，努力飞翔。“暂时遥远的，别慌张，路那么远，我们山顶见”。”笔芯~~

记录基于elementUI一个自定义上传图片的小功能相关推荐

javascript实现的一个信息提示的小功能/
//什么状况.CSDN的排版怎么这么多状况,还是本人太次?调整几次都没弄好.最后一遍了-- 最近由于公司业务问题.须要做一些面向公众的平台,于是对UI要求会高一点, 对于传统的alert的这样的方式来 ...
Vue3 实现一个自定义toast（小弹窗）
前言: 前两天在项目中很多场景下都需要用到一个toast弹窗,项目使用的是ionic+tialwind_Css,ionic也有自带的toast弹窗,虽然大部分场景下直接调用它提供的api已经能满足需求 ...
使用Vue做一个自定义的日历小控件
废话少说,先上效果图: 可以在效果图中看到,选择不同的月份的时候当月天数与星期几都是一一对应,非当月天数则是灰色显示,一目了然. 并且此日历控件支持自动确定当前时间,每次打开默认显示的就是最新的月份, ...
记录和分享一个好用的小工具 Everything
Everything是一款文件.文件夹名称快速搜索软件.在搜索之前就会把所用的文件和文件夹都列出来,这一点与Windows自带的搜索系统不一样,所以称之Everything.在搜索框输入文字,它就会只 ...
【Vue3.0实战逐步深入系列】扩展投票功能基于elementui进行组件封装实现一个简单的问卷调查功能
[千字长文,熬夜更新,原创不易,多多支持,感谢大家] 前言小伙伴们大家好.在前面一偏文章中我们把投票功能进行了简单的改造:引入了axios第三方库并进行了二次封装用于模拟请求服务器数据.同时添加了一 ...
基于 Element-ui 的简单后台模板
本模板基于 Element-ui 2.1 搭建完成,功能简略,望赐教. 项目环境需自行搭建,laravel 可参考 Laravel5.5+Vue+Element-ui+Vux 环境搭建来搭建. 先来 ...
webservice24--基于契约优先开发用户管理小功能--实现wsdl
基于契约优先开发用户管理小功能–实现wsdl 1.编写schema <?xml version="1.0" encoding="UTF-8"?> & ...
【Unity-实现小功能-001】骰子功能
最近在做飞行棋项目,实现了一个投掷骰子的小功能.其中使用的Uniy自带的物理碰撞产生随机点数的功能. 设计要点: 利用Unity自带的物理系统进行投掷,与周围环境进行碰撞,增加随机性. 利用触发器判断 ...
基于C++控制台（Windows平台）的一个吃豆人小游戏
PacManX --南京大学2019秋季学期 "高级程序设计 "课程设计一基于C++控制台(Windows平台)的一个吃豆人小游戏已实现的目标: 地图支持自定义编辑(可编辑地图 ...

记录基于elementUI一个自定义上传图片的小功能

记录基于elementUI一个自定义上传图片的小功能相关推荐

最新文章

热门文章