Пользовательский метод реализации функции загрузки файлов

внешний интерфейс Vue.js React.js jQuery

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

В качестве отступления, Ю Юйси недавно сказал, что vue 3.0 будет разрабатываться, и я слышал, что изменения довольно большие. Я не думаю, что это имеет большое значение. Я собираюсь воспользоваться этой возможностью, чтобы изучить React, а затем найти небольшой проект для практики. В конце концов, изучение vue 3.0 — это тоже обучение, а изучение React — это тоже обучение, поэтому я хочу узнать больше.

Разработка функции загрузки файлов

Что ж, давайте приступим к делу, использование сторонней библиотеки компонентов всегда очень проблематично модифицировать, поэтому я решил реализовать набор функций загрузки файлов самостоятельно в недавнем проекте.

Фактически, вы можете использовать тег ввода HTML для реализации функции выбора файла, а затем отправить выбранный файл в фоновый режим через http-запрос. Конкретный код выглядит следующим образом:

<input id="upload" type="file">

Функцию выбора файла можно реализовать, установив тип входного тега на файл. Затем прочитайте информацию о выбранном файле через селектор.

let uploadFile = document.querySelector("#uploadMission")
let form = new FormData()
form.append('file', uploadFile.files[0])
form.append('yourData', "helloworld")

yourData — это поля, отличные от поля файла, которые вы хотите отправить в фоновый режим Формат параметра запроса:

{
    file: 这里是一大段文件信息,
    yourData: helloworld
}

Таким образом, параметры могут передаваться в соответствии с реальной ситуацией.

Пользовательский стиль загрузки файлов

Но есть проблема, а именно: стиль html очень уродлив, он совершенно не соответствует дизайну пользовательского интерфейса, и его нелегко изменить. Итак, решение, которое я принял, таково: определить стиль самостоятельно, а затем фактически вызывать собственный тег ввода при нажатии. Таким образом, вы можете делать все, что хотите, чтобы отобразить стиль, но не забудьте скрыть собственный тег ввода. Конкретный код выглядит следующим образом:

<span class="yourStyle" @click="uploadFile">上传文件</span
<input id="upload" type="file" @change="doRealUpload" style="display: none;">

При нажатии на uploadFile событие щелчка ввода активно вызывается, чтобы вызвать функцию выбора файла.После того, как файл выбран, файл будет прочитан во входной тег. Нам просто нужно следовать вышеизложенномуРазработка функции загрузки файловпроцесс может быть обработан.

Следует отметить, что после выбора файла будет инициировано событие изменения входного тега, и информация о файле может быть прочитана только в это время. Так что не забудьте поставить операцию передачи файла на задний план в методе doRealUpload.

Решить проблему, связанную с тем, что повторная загрузка одного и того же файла недействительна.

После вышеперечисленных шагов уже можно реализовать функцию загрузки пользовательских файлов. Но всегда есть люди, которым нравится повторно загружать один и тот же файл после модификации. Однако, поскольку событие изменения ввода идентифицируется путем к файлу, независимо от того, является ли это одним и тем же файлом, если имя файла или путь не изменяются, даже если содержимое файла изменяется, событие изменения не может быть инициировано во время повторных загрузок.

Первоначально я думал, что установка значения upload.files[0] на null не решит эту проблему? Но это свойство доступно только для чтения и вообще не может быть изменено. Тогда я подумал, что должен же быть четкий способ очистить информацию о файле, верно? К сожалению, ни то, ни другое. . .

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

Некоторые люди могут захотеть повторно создать новый идентичный входной тег с помощью манипуляций с DOM. Это, безусловно, возможно. Но это заставляет меня думать, что старая идея JQuery не соответствует принципу Vue, ориентированному на данные. Поэтому я воспользовался функциями v-if и v-show в Vue.

Тег v-if во Vue перезагружается каждый раз, а v-show загружается вначале, а затем напрямую считывает кеш. Поэтому я добавляю v-if к входному тегу, а затем устанавливаю для inputShow значение true каждый раз, когда вызывается метод uploadFile, и устанавливаю для inputShow значение false в функции обратного вызова после успешной загрузки файла. Таким образом, каждый раз, когда нажимается кнопка загрузки, тег ввода будет перезагружаться, то есть ввод будет инициализирован.

Конкретный код выглядит следующим образом:

uploadFile() {
    const vm = this
    vm.inputShow = true
    setTimeout( () => {
        let uploadFile = document.querySelector("#upload")
        uploadFile.click()
    }, 100)
}

Причина, по которой здесь добавлен метод setTimeout, заключается в том, что если его не добавить, скорость выполнения кода может быть выше скорости рендеринга DOM, и при выполнении операции выбора будет сообщено об ошибке. Поскольку входной тег не был создан при выполнении события клика.

заключительные замечания

Категории