Собственная загрузка изображений JS (FormData, предварительный просмотр, несколько изображений одновременно)

JavaScript

Предисловие:

Подходит для толпы: новички во фронтенде, которые только начинают. (Проекты front-end и back-end не разделены) Требования к front-end старшего брата с полным стеком back-end (звонки и критика jsp).

Решать проблему:

1.普通js上传一张图片

2.普通js上传一张图片，提前预览。然后再决定是否上传。

3.普通js一次上传多张图片。

Очки знаний:

* FormData对象的使用(上传图片)
* FileReader对象的使用(转换成base64可被预览)

1. Обычный js загружает картинку

HTML-код:

Требуется ввод: управление загрузкой изображения файла

 <input type="file" class="file" name="file" />

JS-код:

1. Привязать событие изменения, чтобы загруженное изображение можно было получить, нажав на загрузку.

2. Имейте в виду, что вы можете получить это

Не паникуйте. Из-за особой природы объекта файловый объект не фиксируется (видим) непосредственно разработчиком. Но он существует.

Этот объект имеет свойство files, которое возвращает объект FileList. Объект FileList выглядит так же, как массив, но не является массивом, не может использовать forEach, но имеет свойство длины

Вы можете получить соответствующий первый файловый объект через FileList.item(0) или FileList[0]

3. Поместите один объект изображения в FormData. Используйте метод добавления FormData.

Уведомление: Для добавления объектов изображения: В методе append() настоятельно рекомендуется использовать метод с тремя параметрами (могут возникнуть проблемы при передаче изображений с двумя параметрами). соответственно (имя ключа, объект изображения, имя изображения)

Обычные пары ключ-значение могут использовать append(key, value)

4. Готово, все просто. Используйте свой знакомый jq/axios/ajax, упакованный самостоятельно, чтобы отправить его в фоновый режим.

    document.querySelector('.file').addEventListener('change', function(e) {
          //1.可以通过this拿到这个file的DOM元素
          console.log(this)
          //1.  e 函数事件参数对象中也有这个file的DOM元素对象。使用e.target也可以直接拿到
          console.log(e.target)
          //对开发人员屏蔽，所以直接 必须调用这个文件的DOM对象的files属性，返回一个数组
          let files = e.target.files
          console.log(files)
          // console.log(files.item(0))
          // console.log(files[0])
          // 判断一手是否有文件
          if (!files.length) return
          // 上传文件 创建FormData
          let formData = new FormData()
          // upFile就是后台接收的key
          formData.append('upFile', files[0], files[0].name)
          // 将formdata发送到后台即可
          // 我用的 axios.post('url', formData)
        })

2. Обычные js загружают картинку и предварительно просматривают ее. Затем решите, следует ли загружать

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

HTML-код:

еще один тег изображения

<input type="file" class="file" name="file" />
<img src="" alt="" />

JS-код: Непосредственно предоставьте метод для преобразования файлового объекта в base64. Вам нужно только инкапсулировать файловый объект в FormData не торопясь, сначала обратиться к base64, чтобы увидеть эффект, а затем сделать следующую операцию

 
        /*
         * 将file对象转化为base64编码
         * file  目标file对象
         */
        function previewFile(file) {
          let reader
          if (file) {
            // 创建流对象
            reader = new FileReader()
            reader.readAsDataURL(file)
          }
          // 捕获 转换完毕
          reader.onload = function(e) {
            // 转换后的base64就在e.target.result里面,直接放到img标签的src属性即可
            document.querySelector('img').src = e.target.result
          }
        }

3. Обычные js загружают несколько картинок одновременно.

Вероятно, таким образом, пользователь может зажать Ctrl или Shift, чтобы выбрать сразу несколько листов.

1. Во входных данных есть еще один атрибут: управление файлом HTML

HTML-код:

<input type="file" class="file" name="file" multiple="multiple" />

JS-код:

Здесь следует отметить метод добавления FormData. Тот же ключ будет автоматически добавлен и не будет перезаписан, но обратите внимание, что вам нужно использовать getAll() для получения полного представления, get() и querySelector получают только первый похожий

Файловый массив в полученной форме Данные и есть этот эффект

    document.querySelector('.file').addEventListener('change', function(e) {
          let files = e.target.files
          if (!files.length) return
          // 上传文件 创建FormData
          let formData = new FormData()
          // 遍历FileList对象，拿到多个图片对象
          for (let i = 0; i < files.length; i++) {
            // formData中的append方法 如果已有相同的键，则会追加成为一个数组  注意:这里需要使用formData.getAll()获取
            formData.append('upFile', files[i], files[i].name)
          }
          console.log(formData.getAll('upFile'))
          // 将formdata发送到后台即可
          // 我用的 axios.post('url', formData)
        })

Суммировать:

1. Вообще говоря, это использование некоторых API, и необходимо обратить внимание на некоторые детали, такие как определение того, является ли файловый объект изображением, и определение типа и размера изображения. доступен в файловом объекте вид собственности.

2. Метод передачи в этой статье использует асинхронный ajax.Если вам нужно использовать собственную форму для синхронной отправки, вам нужно всего лишь добавить enctype="multipart/form-data" к атрибуту FORM.

3. Также существует важный вопрос, связанный со сжатием изображений (во многих случаях загрузка ограничена размером). Резюме для этого пока нет... Это вообще сжатие холста. Вы можете поискать его самостоятельно в соответствии с вашими потребностями. На github также есть много упакованных.

2019.6.13

Если есть какая-то ошибка, добро пожаловать, чтобы исправить ее!

Конечно, если вам интересно, вы также можете общаться и учиться вместе (в группе большие ребята, активные студенты приветствуются)!

Рекламируйте и разместите QR-код!

Категории