记录基于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: {
 // 图片格式进行校验提示，大小不能超过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~~.

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

​

​