“我正在参加中秋创意投稿大赛，详情请看：中秋创意投稿大赛”
哈喽，这里是今天不写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: {
// 图片格式进行校验提示，大小不能超过2M
beforeMiniUpload (file) {
const types = ['image/jpeg', 'image/jpg', 'image/png']
const testmsg = types.includes(file.type)
const isLt10M = file.size < 1024 * 1024 * 2
if (!testmsg) {
this.$message.error('上传图片格式不支持!')
return false
}
if (!isLt10M) {
this.$message.error('上传图片大小不能超过2MB!')
this.deleteMiniproImg()
return false
}
},
// 做上传动作，取得上传成功后接口返回的数据
handleMiniUpload (params) {
const file = params.file
var 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~~.
最后啦，希望看到我每篇文章的小伙伴们，都能如愿以偿，同时对我这个菜鸟多一点包容和期待。未来，拥抱一颗初心，努力飞翔。"暂时遥远的，别慌张，路那么远，我们山顶见"。”笔芯~~
