vue 获取图片base64

在Vue中获取图片的Base64有多种方法，其中一种方法是使用fetch和FileReader API来获取并转换图片为Base64字符串。

首先，在Vue组件中定义一个方法，比如`fetchImage()`，然后在该方法中使用fetch函数来获取图片文件对象。你可以使用以下代码作为参考：

fetchImage() {
  fetch('https://example.com/image.jpg')
    .then(response => response.blob()) // 获取图片文件对象
    .then(blob => {
      const reader = new FileReader();
      reader.onloadend = () => {
        const base64String = reader.result; // 图片的Base64字符串
        // 将Base64字符串储存在变量中或进行其他操作
      };
      reader.readAsDataURL(blob); // 转换图片为Base64字符串
    });
}

在上述代码中，图片的URL地址可以替换为你实际需要获取图片的地址。

另一种方法是使用h5 plus的方法来获取并转换移动端的图片为Base64字符串。你可以参考以下代码：

filmImg() {
  let that = this;
  plus.gallery.pick(function(path) {
    console.log(path); // 打印出图片路径
    that.$base64Img(path).then((res) => {
      console.log(res); // 打印出图片的Base64值
      // 进行其他操作，比如将Base64字符串储存在变量中或进行其他操作
    });
  }, function(e) {
    console.log("取消选择图片");
  }, { filter: "image", multiple: true, maximum: 1, system: false });
}

上述代码中使用了h5 plus的`plus.gallery.pick()`方法来打开手机相册选择图片，并将选中的图片转换为Base64字符串。在这个方法中，你可以将`that.$base64Img(path)`替换为你实际使用的移动端图片转Base64的方法。

请注意，以上是两种常用的Vue获取图片Base64的方法，你可以根据你的实际需求选择合适的方法。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [vue中如何把网络上的图片通过base64显示出来](https://blog.csdn.net/qq_39648029/article/details/130385008)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [vue 图片转base64的两种方法(包括h5+plus调取手机图片)](https://blog.csdn.net/qq_41369815/article/details/105309525)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]