Question

这是我想要做的：我想允许用户从前端上传多个图像，并将这些图像作为base 64字符串作为axios请求的一部分发送。我的基于uvicorn的后端以另一个图像作为base64字符串进行响应。然后，我将转换此图像并将其渲染回图像以供查看。

我的立场：我可以对单个图像执行以上操作。用户能够上载图像并收到回复。但是，我尝试了几种方法，但无法使它适用于多个图像。我试图挖掘在线资源以获取提示，但是我失败了。

这是代码：

<template>
  <div id="Uploader">
    <input type="file" id="file" ref="file" v-on:change="handleFileChanges" multiple/>
    <button v-on:click="upload_picture">Submit</button>
    <div> Hello {{result}}</div>
  </div>
</template>

<script>

import axios from 'axios';


export default {
  name: 'Uploader',

  data() {
    return {
      file: '',
      values: '',
      result: [],
    };
  },

  methods: {
    handleFileUpload() {
      [this.file] = this.$refs.file.files;
    },
    handleFileChanges(e) {
      const reader = new window.FileReader();
      // if window i
      // s not used it says File READER is not defined
      // const afterPostRequest = this.afterPostRequest;
      reader.onload = (event) => {
        // dispatch fileAttached to state UI postEditor with event.target.result as read dataURL
        this.values = event.target.result;
        console.log('VALUES');
        console.log(this.values);
        const data = {
          images: {
            image1: this.values.split(',')[1],
          },
        };
        axios.post('http://0.0.0.0:9094/analyze',
          data,
          {
            headers: {
              'Content-Type': 'application/json',
            },
          }).then((response) => {
          console.log(response);
          this.result = response.data;
          console.log('SUCCESS!!');
        }).catch((error) => {
          console.log(error);
          console.log('FAILURE!!');
        });
      };
      reader.readAsDataURL(e.target.files[0]);
    },
    upload_picture() {
      console.log(this.result);
    },
  },
};
</script>

将多个图像转换为base64并作为单个axios发布请求的一部分发送

0 个答案: