typescript - 使用 VueJs 和 typescript 将输入图像转换为 Base64

这是我在这里的第一个问题。

我想将输入文件(图像)从使用 VueJs 3 和 typescript 的表单转换为 Base64 以将其“发送”到我的后端(java,spring 引导)和 store 它在 mongodb作为“用户”模型的一部分

这是我所拥有的:

e.target.files[0] 行一直说它可能为 null.. 所以 const selectedImage 和 this.picture 不会得到它们。

<template>
<v-file-input
  @change="handleImage"
  type="file"
  accept="image/*"
  label="File input"
  v-model="picture"
  filled
  prepend-icon="mdi-camera"
></v-file-input>
</template>
<script lang="ts">
interface State {
picture: string;
}

data: (): State => {
return {
picture: "",
  }
}
methods: {
handleImage(e: Event) {
      const selectedImage = e.target.files[0];
      this.createBase64Image(selectedImage);
    },
    createBase64Image(fileObject: File) {
      const reader = new FileReader();
      reader.onload = (e) => {
        this.picture = e.target.result;
      };
      reader.readAsBinaryString(fileObject);
    },
},
</script>

预先感谢您的帮助!

回答1

您可以将 createBase64Image 函数中的 reader.readAsBinaryString(fileObject) 更改为 reader.readAsDataURL(fileObject)

还有一些帮助是在你的组件中使用 refs

<template>
<v-file-input
  @change="handleImage"
  type="file"
  accept="image/*"
  label="File input"
  v-model="picture"
  filled
  prepend-icon="mdi-camera"
  ref="file"
></v-file-input>
</template>

<script lang="ts">
interface State {
picture: string;
}

data: (): State => {
return {
picture: "",
  }
}
methods: {
    handleImage(e: Event) {
      const selectedImage = this.$refs.file.files[0];
      this.picture = this.createBase64Image(selectedImage);
    },
    createBase64Image(fileObject: File) {
      const reader = new FileReader();
      return reader.readAsDataURL(fileObject);
    },
},
</script>

附加信息:

https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

回答2

我认为 onchange 事件并不能保证 e.target.result 为非空。做这个检查:

if (e.target && e.target.files.length > 0)