前端h5拍照上传图片,vue代码如何获取文件流或者转base64传给后端

可以使用HTML5的File API来获取文件流或将图片转换为Base64格式。以下是一个示例Vue组件：

<template>
  <div>
    <input type="file" accept="image/*" @change="handleFileUpload">
    <button @click="uploadImage">上传图片</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      file: null,
      imageUrl: ''
    }
  },
  methods: {
    handleFileUpload(event) {
      this.file = event.target.files[0];
      const reader = new FileReader();
      reader.readAsDataURL(this.file);
      reader.onload = () => {
        this.imageUrl = reader.result;
      };
    },
    uploadImage() {
      const formData = new FormData();
      formData.append('image', this.file);
      // 或者将图片转换为Base64格式
      // const base64Image = this.imageUrl.split(',')[1];
      // formData.append('image', base64Image);
      // 发送POST请求，上传图片
      axios.post('/upload', formData)
        .then(response => {
          console.log(response.data);
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
}
</script>

在`handleFileUpload`方法中，我们获取选择的文件并使用`FileReader`将其转换为Base64格式，并将其存储在`imageUrl`属性中。然后在`uploadImage`方法中，我们将文件添加到`FormData`对象中，并使用Axios发送POST请求将其上传到后端。如果你想将图片转换为Base64格式进行上传，你可以使用`this.imageUrl.split(',')[1]`来获取Base64字符串，然后将其添加到`FormData`对象中。