Найдите изображение и сохраните его в массиве типов JSON в Aurelia при отправке.

Question

Я работаю в Аурелии, и мне нужно найти изображение и сохранить его в массиве типов JSON при отправке.

Я незнаком с изображениями в массиве, поскольку массив не может обрабатывать изображения, и мы должны преобразовать изображение вдвоичный файл base64, но как это сделать, я не знаю.Ваша помощь будет полезна для меня.

<div>
  <div>
    <label>Active</label><br>
    <input type="checkbox">
  </div>
  <div class="mr-3">
    <a class="thumbnail">
      <img src="../../../assets/images/default-user.png" width="100" alt="">
    </a>
  </div>
  <div class="col-md-8">
    <div class="radio">
      <input type="radio" name="choice" checked> Keep
    </div>
    <div class="radio">
      <input type="radio" name="choice"> Change
    </div>
    <span class="form-group">
      <input type="file" class="mt-3" id="exampleInputFile" files.bind="">
    </span>
    <button class="btn btn-danger" click.delegate="submit()" >Submit</button>
  </div>

Формат массива

this.list = {
      "a_Rows": [
        {
          "pkiCustomerID": "1",
          "simage": "",

        },

Answer 1

Попробуйте использовать HTML5 Canvas (пример кода в Typescript):

<input type="file" ... files.bind="selectedFiles" change.delegate="inputChange()">

В шаблоне JavaScript:

export class MyTemplate {
    selectedFiles!:FileList;

    inputChange() {
        let image = new Image();

        image.onload = function () {
            let elem = this as HTMLImageElement;

            let canvas = <HTMLCanvasElement> document.createElement('canvas');

            canvas.width = elem.naturalWidth;
            canvas.height = elem.naturalHeight;

            let context = <CanvasRenderingContext2D> canvas.getContext('2d');

            context.drawImage(elem, 0, 0);

            let stringImg = canvas.toDataURL('image/png').replace(/^data:image\/(png|jpg);base64,/, '');
        };

        let file = this.selectedFiles.item(0);
        if (file !== null)
            image.src = URL.createObjectURL(file);
    }
}

stringImg - это результат, который вы ищете.

ОБНОВЛЕНИЕ :

Пример возврата результата к list:

export class MyTemplate {
    private stringImg: string = '';    // <------ ADDED
    private list: any;                 // <------ ADDED
    selectedFiles!:FileList;

    inputChange() {
        let image = new Image();

        let _this = this;              // <------ ADDED
        image.onload = function () {
            let elem = this as HTMLImageElement;

            let canvas = <HTMLCanvasElement> document.createElement('canvas');

            canvas.width = elem.naturalWidth;
            canvas.height = elem.naturalHeight;

            let context = <CanvasRenderingContext2D> canvas.getContext('2d');

            context.drawImage(elem, 0, 0);

            _this.stringImg = canvas.toDataURL('image/png').replace(/^data:image\/(png|jpg);base64,/, ''); // <------ MODIFIED
        };                   

        let file = this.selectedFiles.item(0);
        if (file !== null)
            image.src = URL.createObjectURL(file);
    }

    submit() {                         // <------ ADDED
        this.list = {
            "a_Rows": [
                {
                    "pkiCustomerID": "1",
                    "simage": this.stringImg,
                },
            ]
        }
    }
}