Невозможно прочитать свойство '0' из неопределенного - PullRequest
0 голосов
/ 11 июля 2019

Обновление: после некоторой дополнительной отладки я обнаружил, что объект input имеет массив файлов, и элемент ввода, включающий массив файлов, инициализируется правильно, но когда он выполняет функцию input.onChange, объект ввода внезапно неопределенный, поэтому также массив файлов.

В моем приложении есть редактор tinyMCE, позволяющий редактировать веб-страницы и загружать видео и изображения. К сожалению, я потерял все файлы моего бэкэнда вчера. Я почти вернулся туда, где остановился. И теперь подошли к моменту загрузки медиа. Несмотря на то, что внешний интерфейс не изменился, загрузка медиафайлов TinyMCE перестала работать.

Виновником является this.files[0], который не определен. Вчера точно такой же код работал без проблем. Несмотря на то, что компилятор машинописного текста также заявил, что он не определен, он все равно работает.

TinyMCE init находится в моем nav компоненте:

tinymceInit = {
    plugins: [
      'advlist autolink link image file lists charmap print preview hr anchor pagebreak',
      'searchreplace wordcount visualblocks visualchars insertdatetime media nonbreaking',
      'table contextmenu directionality emoticons paste textcolor responsivefilemanager code'
    ],
    toolbar1: 'undo redo | bold italic underline | alignleft aligncenter alignright alignjustify |' +
      ' bullist numlist outdent indent | styleselect',
    toolbar2: ' link unlink anchor | image media file | forecolor backcolor  | print preview code ',
    image_advtab: true ,
    image_title: true,
    images_reuse_filename: true,
    file_picker_types: 'image media',
    file_picker_callback: (cb, value, meta) => {
      const apiUrl = this.apiService.apiUrl;
      const templateId = this.currTemplateId;
      const input = document.createElement('input');
      input.setAttribute('type', 'file');

      input.onchange = () => {
        console.log('JSDJFSODNVONASDv');
        // @ts-ignore
        const file = this.files[0];
        const fileName = file.name.split('.')[0];
        const reader = new FileReader();
        reader.onload = () => {
          // @ts-ignore
          const blobCache = tinymce.activeEditor.editorUpload.blobCache;
          // @ts-ignore
          const base64 = reader.result.split(',')[1];
          const blobInfo = blobCache.create(fileName, file, base64);

          const xhr = new XMLHttpRequest();
          xhr.open('POST', apiUrl + '/templates/' + templateId + '/media');

          xhr.onload = () => {
            if (xhr.status !== 200) {
              alert('HTTP Error: ' + xhr.status);
              return;
            }
            const json = JSON.parse(xhr.responseText);

            if (!json || typeof json.location !== 'string') {
              alert('Invalid JSON: ' + xhr.responseText);
              return;
            }
            cb(json.location, { title: file.name });
          };

          const formData = new FormData();
          formData.append('file', blobInfo.blob(), blobInfo.filename());

          xhr.send(formData);

        };
        reader.readAsDataURL(file);
      };
      input.click();
    },

при выборе загружаемого файла и нажатии open консоль chrome выдает эту ошибку:

Uncaught TypeError: Невозможно прочитать свойство '0' из неопределенного

Ответы [ 2 ]

0 голосов
/ 11 июля 2019

Я обнаружил проблему: функция input.onChange не должна быть анонимной / лямбда-функцией.Изменение input.onChanges = () => { на input.onChanges = function() { решило проблему.

0 голосов
/ 11 июля 2019

Файлы [] не инициализируются, поэтому вы не определены. Если файлы [] инициализируются из ответа API, возможно, вам следует проверить ответ. Вы говорили, что что-то случилось с вашей задней частью. Отследите переменную files [] в режиме отладки, и вы обнаружите проблему.

...