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回调函数中拿到上传的图片文件 , 转成base64,

再点提交的时候打印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>