vue中上传图片把图片转为base64格式给后端

我做的项目最近要实现一个上传图片的功能，后端需要base64的格式。使用图片转base64格式，再发给后端，后端只需将转码结果存入数据库即可，前端调用接口获取到base64数据转码后的数据。再写入img src 标签即可。

主要思路：

通过new FileReader()把上传的图片转为base64的格式，将转换后的数据给data中的imageUrl,将imageUrl作为参数提交到后台。我这边后端会返回一个经过处理后的网络地址，最后把这个网络地址赋值给 :src="headImg"就可以了。最后点击保存的时候，把图片保存起来。也是调用保存的接口。

html代码：图片会显示在img中，input用于点击上传，input中调用了toBase64()方法。

 <div class="upload_list">
           <img
                class="layui-upload-img"
                name="titleBase64Img"
                id="base64Img"
                :src="headImg"
            />
           <div class="fileInput">
                <input
                    type="file"
                    id="Updateimage"
                    lay-verify="required"
                    @change="toBase64()"
                    accept="image/jpeg, image/png, image/jpg"
                  />
            </div>
 </div>

<script>
var qs = require("qs");
export default {
 data() {
    return {
      headImg:"",
      imageUrl: "",
      type:''
    };
  },
</script>

toBase64()代码：我这里把转换后的数据给了id为base64Img的src属性，同时也给了data中的imageUrl,用于后面向后台发送请求

toBase64(){
      var that = this
      var file = document.querySelector('input[type=file]').files[0];
      console.log("base64",file)
      var reader = new FileReader();
      reader.onloadend = function () {
          $("#base64Img").attr("style","display:inline-block");
          $("#base64Img").attr("src",reader.result);
        //把转换后的数据给id为base64Img的src属性
          console.log(reader.result);
          that.imageUrl = reader.result
          that.updataImg()
        //这里调用了向后台发请求的代码
      }
      if (file) {
          reader.readAsDataURL(file);
      }
    },

updataImg()代码：其实只用传转换出来的数据就行，我这边后台需要一个type参数用于判断，所以传了两个参数。

updataImg(){
      var that =  this
      var json = {};
      json.imageBase64Str = that.imageUrl;
      json.type = 1;
      this.$http
        .post(
          "/bpdm/servlet/MemberServlet?method=ImageUploadingforPc",
          qs.stringify(json, { indices: false })
        )
        .then(res => {
          console.log('返回的数据',res.data.data)
          if (res.data.code == 200) {
            that.headImg = res.data.data.imgUrl
            console.log('返回的图片',that.headImg);
             this.$message({
              message: '图片上传成功',
              type: "success"
            });
          } else {
            this.$message({
              message: '图片上传失败',
              type: "error"
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    }

点击保存时。调用保存的接口:把headImg的路径，拼接其他的数据中

      this.tableData[0].headImg = headImg;
      
      this.$http
        .post(
          "/bpdm/servlet/GetUserInfo?method=updateUserInfo",
          qs.stringify(this.tableData[0], { indices: false })
        )
        .then(res => {
          console.log(res.data.data);
          if (res.data.code == 200) {
            this.$message({
              message: "保存成功",
              type: "success"
            });
          } else {
            this.$message({
              message: res.data.msg,
              type: "error"
            });
          }
        })
        .catch(err => {
          console.log(err);
        });

这篇文章用于记录我是如何转换图片为base64的。写的不好之处请大佬指点