如何将图像从文件输入转换为 vue 中的 base64 url?

利润23

我曾尝试从 vue 中的文件输入转换图像,但我不太确定我是否以正确的方式进行了转换。我想要实现的是获取图像 url,将其分配给数据变量并将其推送到我的猫鼬数据库中

这就是我根据我阅读的指南尝试过的:

输入:

    <div class="singleInput50">
      <span>Personal Image:</span>
      <input type="file" @change="handleImage" accept="image/*">
    </div>

处理图像:

handleImage(e) {
      const selectedImage = e.target.files[0];
      this.createBase64Image(selectedImage);
    },

创建Base64Image:

createBase64Image(fileObject) {
  const reader = new FileReader();

  reader.onload = (e) => {
    this.userObject.imgPersonal = e.target.result;
  };
  reader.readAsBinaryString(fileObject)
  console.log("file object", fileObject);
}

函数执行后的 ImgPersonal 值:

imgPersonal:"ÿØÿàJFIFÿÛC\n \n  \n$ &%# #"(-90(*6+"#2D26;=@@@&0FKE>J9?@=ÿÛC =)#)==================================================ÿÀ"ÿÄ \nÿĵ}!1AQa"q2¡#B±ÁRÑð$3br \n%&'()*456789:CDEFGH

我也试过 readAsDataURL(),结果似乎一样

有什么建议?

托马斯

我正在使用此函数将文件转换为 base64。对我来说很好用:

export default function (blob) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onerror = reject
    reader.onload = () => {
      resolve(reader.result)
    }
    reader.readAsDataURL(blob)
  })
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使用Java在Base64中从URL编码图像

如何在Go中以Perl编码的URL安全解码Base64?

从Android WebView中的base64 URL下载文件

如何在C#中实现Base64 URL安全编码?

如何将Base64字符串转换为位图图像以在ImageView中显示?

如何将图像转换为base64编码?

如何将UIImage转换为base64并将POST转换为URL

Javascript将URL转换为BASE64图像

在React Native中,如何将base64图像转换为jpg然后保存到临时路径?

如何在Ionic 3中将视频文件从ios转换为base64

如何在Flutter / Dart中编码和解码Base64和Base64Url

如何将base64图像解码保存到laravel中的公用文件夹

在Angular中将图像URL转换为base64

在WSO2 EI 6.3.0中将Base64 URL转换为Base64编码格式

如何在Vue.Js中将图像URL从服务器(API / ImageURL)转换为Base64

来自base64或ArrayBuffer的Vue图像

Vue将图像转换为base64

如何将base64编码的字符串上载到s3并在python中访问html文件中的url

如何将图像转换为base64

如何将Base64批量转换为Excel文件中的图像

将从URL提取的图像转换为base64

如何将图像转换为文件中的Base64字符串?

keditor 将 blob 生成的图像 URL 转换为 base64

java中如何将base64转换为MultipartFile

如何将 guzzle 响应(从图像 url)转换为 base64

从设备存储读取图像文件并转换为 Base64 导致 Flutter 中的 base64 无效

如何将base64转换为php POST表单中的图像

JS 中 Base64 到图像文件的转换

Flutter:如何将 base64 转换为图像?