Файловый объект преобразуется в fakepath при сохранении внутри объекта - PullRequest
0 голосов
/ 27 мая 2020

У меня на моей веб-странице вводится изображение, а вывод ввода (объект File) сохраняется внутри класса Question. questionArr - это массив объектов Вопроса

  let questionsArr = []; // Array of Question

  class Question {
    constructor(id) {
      this.id = id;
      this.image = false;
    }
  }

при изменении входного значения входного изображения после вызовов функций.

  const handleImages = evt => {
    let id = evt.target.id; // quizCoverImg or a integer (0,1,...)
    const file = evt.target.files[0];

    if (file && file.type.startsWith("image/")) {
      if (id == "quizCoverImg") {
        coverImage = file; // declared in top of the code
        // console.log(coverImage) => File {name: "cat.png", lastModified ...}
        // Returns a file object, which is correct
      } else {
        questionsArr[id].image = file;
        // console.log(questionsArr[id].image) => File {name: "cat.png", lastModified ...}
        // Returns a file object, which is correct
      }
    }
  };

На данный момент все работает нормально. Проблема возникает, когда я использую вышеуказанные переменные где-то eles

const somewhereElse = () => {
    console.log(coverImage); // File {name: "cat.png", lastModified ...} ✔
    console.log(typeof coverImage); // object ✔
    console.log(questionsArr[0].image); // C:\fakepath\cat.jpg ❓ should return a file object as mentioned above
    console.log(typeof questionsArr[0].image); // string ❓
}

Я знаю, что FileReader() существует, но я хочу выяснить, почему я получаю здесь два разных результата.
Проблема возникла в svelte@3.22.2


Редактировать 1: Места, где используется questionArr
Это добавляет вопрос в массив

  const addQuestion = () => {
    const q = new Question(n);
    questionsArr = [...questionsArr, q]; // because I'm using svelte :)
    n++;
  };

Затем используется выше handleImage()

1 Ответ

0 голосов
/ 27 мая 2020

Ключевое различие заключается в методе toString(), который влияет на то, на что вы смотрите. Не так много контекста, чтобы помочь отладить детали того, как именно вы это выполняете и как вы проверяете значения.

Когда вы выбрали файл во вводе файла формы, браузер преобразует путь в «fakepath», чтобы сценарий мог получить доступ к выбранному файлу, но не мог узнать о структуре каталогов пользователя. Имя файла / путь - это разумный результат по умолчанию toString при попытке проверить / распечатать объект файла.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...