Подробная схема загрузки картинок

внешний интерфейс

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

Словарь точек знаний

  • тип файла входного тега
  • Объект FileReader: чтение файлов
  • FileReader.readAsDataURL(): преобразовать прочитанный файл в строку в кодировке base64.
  • Объект FormData
  • Загрузить с помощью аксиом

тип файла входного тега

Когда тип входного тега установлен на файл, поведение ввода соответствует стилю загружаемого файла.

默认样式

file-input имеет следующие свойства:

  1. accept
    Задает диапазон типов файлов для выбора. По умолчанию для всех типов файлов
    Картинка accept="image/*"
    Значение типа файла см.MDN
  2. capture
    Это свойство имеет смысл только в том случае, если тип файла — изображение или видео, и он находится на мобильном устройстве.
    • Capture = 'пользователь' вызывает переднюю камеру
    • Capture = 'environment' вызывает заднюю камеру
    • Если не установлено, пользователь выбирает
  3. multiple
    Логическое значение, которое, если оно присутствует, указывает, что пользователь может выбрать несколько файлов.
  4. files
    Возвращает FileList, в котором перечислены все выбранные файловые объекты. Этот список имеет только один член, если не указан множественный атрибут. В основном используется для операций JS.
<!-- html -->
<input type="file" multiple id="imgLocal" accept="image/*" />
// js
let inp = document.querySelector('#imgLocal')
inp.onchange = function(e) {
  let fileList = document.querySelector('#imgLocal').files
  console.log(fileList) //files
}

Объект FileReader

Мы используем объект FileReader для реализации функции предварительного просмотра изображения.

Объект FileReader позволяет веб-приложению асинхронно считывать содержимое файла (или буфера необработанных данных), хранящегося на компьютере пользователя, используя объект File или Blob для указания файла или данных для чтения.

Конструктор

new FileReader()

Возвращает вновь созданный FileReader.

Атрибуты

  • FileReader.readyState
    Число, представляющее состояние FileReader, со следующими значениями
    • 0: ПУСТОЙ/данные еще не загружены
    • 1: ЗАГРУЗКА/данные загружаются
    • 2: ВЫПОЛНЕНО/выполнены все запросы на чтение
  • FileReader.result
    содержимое файла. Это свойство допустимо только после завершения операции чтения.
  • FileReader.error

события и методы

Мы в основном используемFileReader.onloadсобытия иFileReader.readAsDataURL()метод см. др.MDN

  • FileReader.onload
    Обработайте событие загрузки. Это событие срабатывает, когда операция чтения завершается
  • FileReader.readAsDataURL() Начать чтение содержимого указанного большого двоичного объекта. После завершения свойство результата будет содержать данные: строка в формате URL, представляющая содержимое прочитанного файла.
//继续使用上文的fileList
let file = fileList[0]
const fileReader = new FileReader()
fileReader.readAsDataURL(file) //读取图片
fileReader.addEventListener('load', function() {
  // 读取完成
  let res = fileReader.result
  // res是base64格式的图片
})

Мы можем реализовать функцию предварительного просмотра, установив src для img в DOM в результате чтения.

Объект FormData

Использование объекта FormData:

  1. Используйте несколько пар «ключ-значение» для имитации ряда элементов управления формы: то есть соберите имя и значение всех элементов формы в форме в строка запроса
  2. Загружать бинарные файлы асинхронно.

Конструктор

new FormData()

Возвращает вновь созданный FormData.

метод

Существует много методов FormData. Здесь мы используем только ее метод append()

formData.append(name, value, filename)

  • имя: имя атрибута
  • value: значение атрибута, в нашем случае это относится к данным файла
  • имя файла: если вторым параметром является файл или большой двоичный объект, сообщите серверу имя файла. Имя файла по умолчанию для объектов Blob — «blob». Имя файла по умолчанию для объекта File — это имя файла.
// 继续使用上文的file
const formDate = new FormData()
formDate.append('userPicture', file, '1.jpg')

Загрузить с помощью аксиом

В основном настраивайте Content-Type в заголовке

код напрямую

//继续使用上文的formDate
let config = {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
}
axios
  .post('serverUrl', formDate, config)
  .then(res => {
    console.log(res)
  })
  .catch(err => {
    console.log(err)
  })

axios также может использовать onUploadProgress для отслеживания процесса загрузки, поэтому я не буду вдаваться в подробности.

разное

Существуют и другие методы, такие как прямая подача документов, которые могут быть платными. Вы можете посмотреть, если вам интересно.

оригинальный текст здесь