使用VUEJ和Typescript将输入图像转换为base64

Question

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

我想使用vuejs 3将输入文件（image）从表单中转换为typescript和base64，以将其“发送”到我的后端（Java，Spring Boot），并将其存储在MongoDB中，作为“用户”模型的一部分

。我拥有的：

e.target.files [0]行不断地说它可能是无效的。

<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>

预先感谢您的帮助！

Answer 1

您可以更改 reader.readasbinarystring（fileObject） createBase64Image 函数函数 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>

其他信息中：

Answer 2

我认为Onchange事件并不能保证E.Target.Result是非无效的。进行此检查：

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