我做的項目最近要實現(xiàn)一個上傳圖片的功能，后端需要base64的格式。使用圖片轉(zhuǎn)base64格式，再發(fā)給后端，后端只需將轉(zhuǎn)碼結(jié)果存入數(shù)據(jù)庫即可，前端調(diào)用接口獲取到base64數(shù)據(jù)轉(zhuǎn)碼后的數(shù)據(jù)。再寫入img src 標簽即可。

主要思路：

通過new FileReader()把上傳的圖片轉(zhuǎn)為base64的格式，將轉(zhuǎn)換后的數(shù)據(jù)給data中的imageUrl,將imageUrl作為參數(shù)提交到后臺。我這邊后端會返回一個經(jīng)過處理后的網(wǎng)絡(luò)地址，最后把這個網(wǎng)絡(luò)地址賦值給 :src="headImg"就可以了。最后點擊保存的時候，把圖片保存起來。也是調(diào)用保存的接口。

html代碼：圖片會顯示在img中，input用于點擊上傳，input中調(diào)用了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()代碼：我這里把轉(zhuǎn)換后的數(shù)據(jù)給了id為base64Img的src屬性，同時也給了data中的imageUrl,用于后面向后臺發(fā)送請求

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);
        //把轉(zhuǎn)換后的數(shù)據(jù)給id為base64Img的src屬性
          console.log(reader.result);
          that.imageUrl = reader.result
          that.updataImg()
        //這里調(diào)用了向后臺發(fā)請求的代碼
      }
      if (file) {
          reader.readAsDataURL(file);
      }
    },

updataImg()代碼：其實只用傳轉(zhuǎn)換出來的數(shù)據(jù)就行，我這邊后臺需要一個type參數(shù)用于判斷，所以傳了兩個參數(shù)。

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('返回的數(shù)據(jù)',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);
        });
    }

點擊保存時。調(diào)用保存的接口:把headImg的路徑，拼接其他的數(shù)據(jù)中

      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);
        });

這篇文章用于記錄我是如何轉(zhuǎn)換圖片為base64的。寫的不好之處請大佬指點