Обзор решений для загрузки изображений/файлов на основе бизнес-сценариев

JavaScript внешний фреймворк
Обзор решений для загрузки изображений/файлов на основе бизнес-сценариев

предисловие

Загрузка изображения/файлаГруппа является одним из незаменимых звеньев при разработке корпоративных проектов, и любой задействованный пользовательский модуль будет иметьЗагрузка изображения/файлатребования во многих сторонних библиотеках компонентов (ant desigin, element uiЭто также один из основных компонентов) в. Тогда я приду, чтобы забрать васРеализовать компонент загрузки изображений/файлов с нуля и расширить более мощный компонент загрузки..

ты получишь

  • Реализация общей функции загрузки изображений
  • Написать компонент загрузки изображения / файла вручную
  • какФункция обрезкиИнтегрирован в компонент загрузки
  • Автономный план Picture для платформы контента / платформы визуализации
  • Как расширить более мощное решение для загрузки изображений

текст

какФронтенд-инженер, Решение проблем проекта является одной из наших основных обязанностей. Мы можем использовать полученные знания для решения проблем и потребностей в разработке проекта. Это также первый этап, который мы пройдем в нашей карьере, а именно—Адаптационный периодЕсли мы хотим продолжить продвижение, нам нужноПостоянно сражайтесь с монстрами, чтобы прокачиваться, осваивайте различные навыки, чтобы мы могли использовать наилучшее решение для эффективного решения проблем, когда столкнемся с проблемами в будущем, что является вторым этапом——период разработки.

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

1. Распространенные схемы загрузки изображений

отweb1.0С начала эры схема загрузки, которую мы используем чаще всего,формаформа, нам нужно толькоformписать разныеinput(элемент input) и укажите адрес сервера загрузки (action) может быть. Форма похожа на следующую:

<form action="/xuxiaoxi/form/post">
    <div class="form-item"><input type="text" /></div>
    <div class="form-item"><input type="passward" /></div>
    <div class="form-item"><input type="file" /></div>
    <div class="form-item"><input type="submit" /></div>
</form>

существуетXHRКогда технология еще не популярна, большинство из нас выберут вышеупомянутую схему, единственным недостатком является то, чтоСтраница обновится после отправки, пользовательский опыт не очень хорош, и это также может привести к локальной потере данных, но все же есть решения, то естьform + iframeТехнология.

1.1 форма + iframe решение

form + iframeОсновная идея схемы заключается в том, что наше действие отправки запускается на родительской странице, ноformформа указывает наiframe, который может обеспечить частичное обновление, и в некоторых сценариях все еще используется эта схема, конкретные принципы заключаются в следующем:Оба вышеупомянутых решения могут достичь традиционногоformФункция частичного обновления при подаче, но схему нужно вести отдельноiframe форма, поэтому я в основном использую вторую схему, и совместимости можно добитьсяIE9(Хотя сейчас нет особого смысла в совместимости с браузерами IE, но знать об этом все равно нужно)

1.2 решение ajax + formData

существуетXHRПосле победы мы можем легко использоватьajaxДля реализации асинхронных запросов, для загрузки файлов мы также можем использовать его более гибкоajaxа такжеformDataдобиваться и постепенно отходить отнативная формаЗависимость.

FormDataОбъект используется для компиляции данных в пары ключ-значение для отправки данных с помощью XMLHttpRequest. Основная форма для передачи данных, но может использоваться для передачи данных с ключом (keyed data), а также использоваться в независимой форме. Если атрибут формы enctype для multipart/form-data, то для отправки данных будет использоваться метод Submit form(), чтобы данные передачи имели одинаковую форму.

Давайте сначала рассмотрим простой пример загрузки файлов с помощью formData:

let formData = new FormData();

// HTML 文件类型input，由用户选择
formData.append("userfile", fileInputElement.files[0]);

let request = new XMLHttpRequest();
request.open("POST", "http://http://io.nainor.com/h5/form");
request.send(formData);

Приведенные выше короткие 5 строк кода реализуют передачу файла черезformDataСпособ загрузки на сервер, очень ли он прост? Предыдущая статья автораРазработать приложение для круга друзей для программистов на основе react/vueЭта программа принята, и желающие могут ее изучить.

Если вы хотите добиться многофайловой загрузки, это тоже очень просто, здесь мы используемaxiosНапример, конкретная реализация выглядит следующим образом:

const formData = new FormData()
for(let i=0; i< files.length; i++) {
  formData.append(`file_${i+1}`, files[i].file)
}
axios({
  method: 'post',
  url: '/files/upload/tx',
  data: formData,
  headers: {
      'Content-Type': 'multipart/form-data'
  }
});

Здесь следует обратить внимание на многофайловую загрузку в запросеhttp headerустановить вContent-Typeдляmultipart/form-data, Конечно, на основе вышеизложенных принципов вы также можете реализовать компоненты загрузки файлов, которые больше соответствуют потребностям вашего бизнеса, такие как предварительный просмотр, текущее ограничение и т. д.

1.3 Внедрение сторонних компонентов

Чтобы развивать бизнес более эффективно и быстро, мы иногда можем выбрать стороннее более зрелое решение, такое как компонент загрузки antd, например компонент загрузки элемента ui, здесь автор суммирует еще несколько полезных и мощных решений. , вы можете почувствовать это:

  • antd/elementизuploadУпаковка
  • FilePondМожет загружать что угодно и иметь возможность оптимизировать изображения для более быстрой загрузки, обеспечивая при этом плавный пользовательский интерфейс.
  • Web UploaderПростое приложение, разработанное командой Baidu WebFE (FEX).HTML5Господин,FLASHДополнен современными компонентами загрузки файлов
  • vue-simple-uploaderна основеvueМощный внешний вид компонента загрузки файла

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

2. Интегрируйте функцию кадрирования в компонент загрузки изображений.

Для компонента загрузки изображений мы часто не можем определить, что загружает пользователь, поэтому нам необходимо заранее ограничить, например, ограничить размер изображения, формат изображения, соотношение изображения и т. д., чтобы соответствовать нашим бизнес-стандартам. Ограничение очень легко реализовать, но в отношении соотношения изображений мы не можем ожидать, что пользователи справятся с этим самостоятельно, потому что это значительно увеличит нагрузку на пользователей при использовании веб-сайта, поэтому мы можем предоставить функцию, которая позволяет пользователямОнлайн-вырез. Как показано ниже:Приведенные выше скриншоты взяты изH5-DooringКомпонент загрузки изображения онлайн-редактора, после того, как пользователь загрузит, появится интерфейс обрезки изображения, мы укажем пропорцию изображения, позволяющую пользователю свободно обрезать. Автор будет опиратьсяantdизuploadСобрание сantd-img-cropДавайте возьмем вас, чтобы реализовать функцию онлайн-резки изображений.Конкретный код реализован следующим образом:

import React, { useState } from 'react';
import { Upload } from 'antd';
import ImgCrop from 'antd-img-crop';

const Demo = () => {
  const [fileList, setFileList] = useState([
    {
      uid: '-1',
      name: 'image.png',
      status: 'done',
      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    },
  ]);

  const onChange = ({ fileList: newFileList }) => {
    setFileList(newFileList);
  };

  const onPreview = async file => {
    let src = file.url;
    if (!src) {
      src = await new Promise(resolve => {
        const reader = new FileReader();
        reader.readAsDataURL(file.originFileObj);
        reader.onload = () => resolve(reader.result);
      });
    }
    const image = new Image();
    image.src = src;
    const imgWindow = window.open(src);
    imgWindow.document.write(image.outerHTML);
  };

  return (
    <ImgCrop rotate>
      <Upload
        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
        listType="picture-card"
        fileList={fileList}
        onChange={onChange}
        onPreview={onPreview}
      >
        {fileList.length < 5 && '+ Upload'}
      </Upload>
    </ImgCrop>
  );
};

ReactDOM.render(<Demo />, mountNode);

Вышеприведенное, конечно, является лишь базовым примером обрезки и загрузки изображения.antd-img-cropОн также предоставляет более гибкие конфигурации, чтобы облегчить нам разработку более гибких и мощных эффектов резки.Конечно, мы также можем использоватьreact-cropperДля этого он обеспечивает более гибкое управление кадрированием и функцию предварительного просмотра кадрирования в реальном времени, как показано на следующем рисунке:

3. Автономность изображения под контент-платформой/платформой визуализации

Для платформ контента или платформ визуализации простая загрузка изображений не может удовлетворить потребности пользователей, поскольку платформы контента/визуализации уделяют больше внимания выбору и использованию изображений и предъявляют высокие требования к изображениям. дизайн часто предоставляется в таких платформах.Библиотека изображенийЭта функция позволяет пользователям искать массивные изображения в библиотеке материалов для удовлетворения своих потребностей, но часто, чтобы удержать пользователей, они повышают лояльность пользователей.

На основе вышеприведенных сценариев продакт-менеджеры часто выдвигают следующие требования:Можете ли вы предоставить необязательное решение, где пользователи могут загружать сами фотографии или использовать ресурсы библиотеки изображения, которые мы предоставляем?В настоящее времяимеет опытПередняя часть часто говорит:договариваться!

Прежде чем проектировать эту функцию, мы часто обращаемся к другим существующим реализациям, здесь мы приводим несколько примеров, как показано на следующем рисунке:

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

дляH5-DooringИнкапсуляция библиотеки изображений реализована как общая услуга, то есть всякий раз, когда используется компонент загрузки, будут необязательныеВыберите из галереи изображенийкнопка.Схема реализации тоже очень проста, т. е. вuploadРасширьте слой в компоненте, используйтеModal+TabЧтобы сделать интерфейс выбора изображения, когда выбор завершен, вручную установите адрес изображения наuploadкомпонент.Код выглядит следующим образом:

handleImgSelected= () => {
  const fileList = [
    {
      uid: uuid(8, 16),
      name: 'h5-dooring图片库',
      status: 'done',
      url: this.state.curSelectedImg,
    },
  ];
  this.props.onChange && this.props.onChange(fileList);
  this.setState({ fileList, wallModalVisible: false });
};

используется здесьantdизкомпонент формыуправляемый режим.

4. Расширение компонента загрузки изображений

Описанного выше решения достаточно для базовых сценариев использования, но если это контентный веб-сайт или платформа визуального построения, поскольку наша конфигурация может быть распространена в общедоступной сети в любое время, это будет связано с проблемой безопасности контента. недопустимая информация об изображении может быть связана с предоставлением платформы, поэтому нам также необходимо предоставить полный механизм проверки.Например, после того, как пользователь настроит или опубликует контент, его необходимо просмотреть, прежде чем его можно будет официально опубликовать в Интернете, но это полностьюЭффективность ручной проверки относительно низкая, поэтому в настоящее время нам нужно найти решение для автоматической проверки машины.Например, Alibaba Cloud и Tencent Cloud предоставляют такие услуги, как идентификация изображений.Мы можем интегрировать эти услуги в наши компоненты для достижения реальной бизнес-автономии, чтобы более безопасно осуществлять эксплуатацию и развитие предприятия.

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

5. Резюме

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

адрес гитхаба:Онлайн-редактор H5 H5-Dooring

наконец

Если вы хотите узнать больше об играх H5,webpack,node,gulp,css3,javascript,nodeJS,canvasПередовые знания визуализации данных и практические, добро пожаловать в «Кое-что о переднем плане», чтобы научиться обсуждать, исследовать границы переднего плана.

больше рекомендаций

Категории