HTML Проблемы с объектами API файлов - PullRequest
1 голос
/ 14 марта 2020

Оригинальный вопрос Почему я не могу l oop через объект File API. Файловый API утверждает, что это интерфейс только для чтения, но я не могу читать с использованием традиционного для l oop. Я прочитал https://www.w3.org/TR/FileAPI/#dfn -файл , но без дальнейшего понимания. Цель состоит в том, чтобы внедрить файл в мой собственный класс файла, а затем в конструктор l oop через объект файла, чтобы установить свойства в новом классе файла, например, имя файла, размер и т. Д. c. Проблема в том, что я не могу прочитать свойства объекта HTML File API с помощью hasOwnProperty (), и поэтому мне нужно для go проверки свойства или мне нужно привести его к массиву.

РЕДАКТИРОВАТЬ (РЕШЕНИЕ):

По-прежнему нет четкого ответа, но решение, как я вижу, заключается в создании класса File, который расширяет пользовательский файловые утилиты для размера, прогресса и т. д. c.

import utils from '../utilities/utils';
import _FileError from '../utilities/FileError';

class _File {

    constructor(file) {
        utils.defineNonEnumerable(this, 'errors', []);
        utils.defineNonEnumerable(this, 'file', null);
        utils.defineNonEnumerable(this, 'valid', null);

        if ((this.valid = !(file instanceof File))) {
            // Set file properties
            this.id = utils.uid();
            this.file = file;
            this.fileType = this.file.type;
            this.name = file.fileName || file.name;
            this.size = file.size;

            // Set state properties
            this.aborted = false;
            this.completed = false;
            this.status = null;
            this.category = null;
            this.category = null;
        } else {
            this.errors = new _FileError(file,new TypeError());
        }
    }
}

export default _File;

utils.extend(_File.prototype, {

    getSize: function () {
        var size = 0
        this._eachAccess(function (file) {
            size += file.size
        }, function () {
            size += this.size
        });
        return size
    }
});



ПРИМЕР ОРИГИНАЛЬНОГО ВОПРОСА

// Note the same applies to e.target.files as they are all HTML File API

onDragDrop (e) {
    for (let i = 0; i < e.dataTransfer.files.length; i++) {
        this.files.push(new File(files[i]));
    }
}

класс моих файлов


class File {

    constructor(file) {
        this.file = file;

        // this works i.e. assigns name to name property
        this.name = file.name;

        // deconstruction works i.e. assigns name to name property
        const {name} = file;
        this.name = name;

        // the result if type  object
        console.log(typeof file);

        // this returns false
        console.log(typeof file.hasOwnProperty('name'));

        // this does not work as expected on an object
        for (var property in file) {
            // hasOwnProperty returns false
            if (file.hasOwnProperty(property)) {
                this.file[property]
            }
        }

      // this works and sets properties on the object, but feels dodgy 
      // given that none of the object properties are read by hasOwnProperty() 
        for (var property in file) {
            if (typeof file[property] !== "function") {
                this[property] = file[property]
            }
        }


        console.error('IMAGE MODEL',this);

    }
}

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