vue中怎么把图片转换成base64字符串 , 以及base64字符串怎么转换成图片路径

一,项目根路径npm i vant,安装vant组件库,

main.js中引入并注册vant

二,页面中使用 van-uploader上传文件的组件 

第一种方法 : 在提交表单时拿到上传的图片文件,转成base64,但在提交的函数内部打印ar还是空数组,不知道是什么原因,应该跟作用域有关系,研究半天没解决,希望有知道的大佬指点下,然后就想出了第二种方法解决的

<template>
  <div>
    <van-form ref="formRef">
      <van-field>
        <template #input>
          <van-uploader v-model="fileList" multiple accept="image/*" />
        </template>
      </van-field>
      <van-field>
        <template #button>
          <van-button type="info" native-type="submit" @click="tj">提交</van-button>
        </template>
      </van-field>
      <img :src="picPath" alt="">
    </van-form>
  </div>
</template>

<script>
  export default {

    name: '',    data() {
      return {
        // 上传的文件列表
        fileList: [],        // 图片路径
        picPath: "",arr:[]
      }
    },    methods: {
     //点提交时
      tj() {
        console.log("提交表单");
        // 上传的图片
        let files = this.fileList[0].file
        //转码base64
        let reader = new FileReader();
        let imgFile;
        reader.readAsDataURL(files);
        reader.onload = e => {
          imgFile = e.target.result;
          this.arr = imgFile.split(",");
          // arr[1] 就是图片的 Base64加密字符串
          console.log(this.arr[1]);

          //base64字符串拼接形成图片的src路径
          this.picPath = 'data:image/png;base64,' + arr[1]

        }
        //这里的this.arr还是之前的空数组,所以这里打印出 undefined
        console.log(this.arr[1]);

      }

    }
  }

</script>

<style lang="" scoped>

</style>

第二种方法 : 在van-uploader组件自带的after-read回调函数中拿到上传的图片文件,

再点提交的时候打印this.arr[1]已经变成base64字符串了,可以提交表单时携带

<template>
  <div>
    <van-form ref="formRef">
      <van-field>
        <template #input>
          <van-uploader v-model="fileList" multiple accept="image/*" :after-read="afterRead" />
        </template>
      </van-field>
      <van-field>
        <template #button>
          <van-button type="info" native-type="submit" @click="tj">提交</van-button>
        </template>
      </van-field>

    </van-form>
  </div>
</template>

<script>

  export default {

    name: '',data() {
      return {
        // 上传的文件列表
        fileList: [],arr: []
      }
    },methods: {
     // 选择图片后触发
      afterRead(e) {
       // 上传的图片
        console.log(e.file);
        let reader = new FileReader();
        let imgFile;
        reader.readAsDataURL(e.file);
        reader.onload = e => {
          imgFile = e.target.result;
          this.arr = imgFile.split(",");
          // arr[1] 就是图片的 Base64编码字符串
          console.log(this.arr[1]);
        }
      },tj() {
      //这里打印this.arr[1]已经变成base64字符串了,可以提交表单时携带
        console.log(this.arr[1]);

       
      }
    }
  }

</script>

<style lang="" scoped>

</style>