Question

更新：经过更多调试后，我发现input对象具有files数组，并且包含files数组的input元素已正确初始化，但是当它执行input.onChange函数时，输入对象突然变得不确定，因此是文件数组。

我的应用程序中有一个tinyMCE编辑器，因此可以编辑网页并可以上传视频和图像。不幸的是，昨天我丢失了后端的所有文件。我快要回来了。现在已经到了上传媒体的地步。即使前端没有发生变化，TinyMCE媒体上传也无法正常工作。

罪魁祸首是this.files[0]（未定义）。昨天，完全相同的代码没有问题。即使打字稿编译器也指出它是未定义的，它仍然可以工作。

位于我的nav组件中的

TinyMCE初始化：

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();
    },

在选择上传文件并点击打开时，Chrome控制台会抛出此错误：

未捕获的TypeError：无法读取未定义的属性'0'

Answer 1

files []尚未初始化，这就是未定义的原因。如果files []是通过API响应初始化的，则可能应该检查响应。您是在说后端发生了什么。在调试模式下跟踪files []变量，您将发现问题。

Answer 2

我发现了问题：input.onChange函数不应是匿名/ lambda函数。将input.onChanges = () => {更改为input.onChanges = function() {解决了该问题。

无法读取未定义的属性“ 0”

2 个答案: