vue.cli3使用elementUi的upload图片转base64后上传后台

使用elementUI图片上传的时候总会因为一个值而烦恼—action
这个怎么说呢，其实里面可以给空值的，只是会报一个错，其实不怎么碍事，也可以放一个接口，只不过你要考虑一个跨域的问题，如果不放就让它空着吧

1.使用elementUI的upload

这里基本就可以这样写了，如果需求不同可以看看elementUi的文档添加几个需求
<div class="upLiadImg">
   <el-upload
   	class="avatar-uploader"
   	action="" //可以不写，只是会报错，不碍事，不想的话就写一个接口，有可能会跨域
  	:on-change="getFile"  //这是事件
   	:limit="1" //一次只能选择一个图片文件
   	>
  	<div class="upImg">选择图片</div>
   <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb,一次只传一次</div>
  </el-upload>
</div>

2.点击选择图片触发的事件:on-change=“getFile” 和转为base64图片

// 图片转Base64
    getBase64(file) {
      let slef = this
      //把图片转成base64编码
      return new Promise(function (resolve, reject) {
        let reader = new FileReader()
        let imgResult = ''
        reader.readAsDataURL(file)
        reader.onload = function () {
          imgResult = reader.result
        }
        reader.onerror = function (error) {
          reject(error)
        }
        reader.onloadend = function () {
          slef.ruleForm.tp = imgResult //在这里图片已经变成base64格式了，你们可以console.log(imgResult),我是放在data里面一个值里面保存起来
          resolve(imgResult)
        }
      })
    },
    // 点击现在文件
    getFile(file, fileList) {
      //上传图片
      this.getBase64(file.raw)//这里是把图片传入上面进行base64加密，你们可以consloe一下这个值
    },

3.做到这步的话图片已经变成base64格式了，保存在一个值内

然后就是用自己顺便定义一个函数把值给传给后台了
不过因为base64格式的图片，是very very 长的
所以有可能get传不过去
下面我们就想想怎么传过去呢

4.base64格式图片传后端，post去传

其实没什么难的，不过新手的话，会在这里绕很长时间，下面我们就来说说把
1.使用qs这个插件，如果你安装过axios的话，就不要去npm去安装了，不然会报错的，axios里面就有qs库，只要引入就ok了—import Qs from ‘qs’（其实我就是那个sb，安装报错还以为我弄了啥导致的报错，然后看了一些大佬说安装了axios就不用安装了，直接引入就ok，哎。。。）

handleUpTo() {
      let self = this
      let data = {
        xqbm: self.ruleForm.xqbm,
        xqmc: self.ruleForm.xqmc,
        ssqXzqhdm: self.ruleForm.ssqXzqhdm,
        gajgjgdm: self.ruleForm.gajgjgdm,
        sqdm: self.ruleForm.sqdm,
        xxdz: self.ruleForm.xxdz,
        wyno: self.ruleForm.wyno,
        jd: self.ruleForm.jd,
        wd: self.ruleForm.wd,
        dtzbj: self.ruleForm.dtzbj,
        jybh: self.ruleForm.jybh,
        jyxm: self.ruleForm.jyxm,
        jylxfs: self.ruleForm.jylxfs,
        zdmj: self.ruleForm.zdmj,
        jzmj: self.ruleForm.jzmj,
        tp: self.ruleForm.tp,//这里是我当时存放的base64图片的地方
      }
      data = Qs.stringify(data) //用这个方法转变一下
      self.$refs.RuleForm.validate(async (valid) => {//这里我用的element的From的验证
        if (valid) {
          let res = await self.$http.post('/xq/xzxq.do', data)//用post去传给后端
          if (res.data.massage.status == 200) {
            self.$message.success('添加成功')
            self.$router.go(-1)
          } else if(res.data.massage.status == 202){
            self.$message.error('小区编码重复')
          }else{
            self.$message.error('添加失败')
          }
        }
      })
    },

推荐一位大佬说的post请求的说明，他说的不错，我就不细说了，如果有用记得回来点赞就可以了。

兄弟们过去之后记得回来给我点个赞