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的。寫的不好之處請大佬指點

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Swift1> Swift和OC的區別1.1> Swift沒有地址/指針的概念1.2> 泛型1.3> 類型嚴謹 對...
    cosWriter閱讀 11,136評論 1 32
  • 文件上傳時Web應用最為常見的功能之一,傳統的文件上傳需要定制一個特殊的form表單來上傳文件,以上傳圖片為例,常...
    ramostear閱讀 1,792評論 0 1
  • 功能需求 1.完成圖片的上傳和上傳之后圖片的預覽功能 遇到的問題 1.使用html的src標簽,可以直接發送請求。...
    張培_閱讀 3,955評論 0 3
  • 他在天光掩滅之時到來 那個穿著黑袍的旅者 他來的時候眾人高唱 然而世間卻如墳墓一般靜默 人們向著他伸出雙手,卻又與...
    妖怪罐頭閱讀 516評論 4 11
  • 曾經看到過這樣一個詞“甜蜜的負擔”,我想,用這個詞來形容孩子對于父母意義再合適不過了。 從是否有孩子這個身份來講,...
    良木花開閱讀 445評論 0 0