конвертировать несколько изображений в base64 и отправить как часть одного топора ios после запроса - PullRequest
Новая
       19

конвертировать несколько изображений в base64 и отправить как часть одного топора ios после запроса

0 голосов
/ 04 марта 2020

вот что я пытаюсь сделать: я хочу разрешить пользователю загружать несколько изображений из внешнего интерфейса и отправлять эти изображения в виде строк base 64 как часть запроса ax ios. Мой бэкэнд на основе 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>
...