input file获取本地图片路径并转换为base64

最新推荐文章于 2023-02-15 11:05:05 发布

就酱酱

最新推荐文章于 2023-02-15 11:05:05 发布

阅读量4k

点赞数 1

分类专栏：前端文章标签： vue 图片路径 file base64

本文链接：https://blog.youkuaiyun.com/zqyzqy22/article/details/90270069

版权

前端专栏收录该内容

25 篇文章

订阅专栏

input file获取本地图片路径并转换为base64

<template>
  <div>
    <input type="file" @change="chose">
  </div>
</template>

<script>
export default {
  methods: {
    chose(e) {
      console.log(e.target.files[0]);
      console.log(window.URL.createObjectURL(e.target.files[0]));
      var image = new Image();
      image.src = window.URL.createObjectURL(e.target.files[0]);
      //src:  blob:http://localhost:8082/9df84568-5bd8-40a6-af88-30b545bffa26
      console.log(image);
      image.onload = () => {
        console.log(this.getBase64Img(image));
        //this.getBase64Img(image)即为转换为base64格式的图片形式
      };
    },
    getBase64Img(img) {
      var canvas = document.createElement("canvas");
      canvas.width = img.width;
      canvas.height = img.height;
      var ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0, img.width, img.height);
      var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
      var dataURL = canvas.toDataURL("image/" + ext);
      return dataURL;
    }
  }
};
</script>

<style>
</style>