Всем привет. В этом году я решил написать не менее четырех технических статей в месяц. Это по крайней мере один в неделю.
Если я буду придерживаться этого в течение всего года, мы рассмотрим почти 60 (если не больше 2020 года. Не могу дождаться, чтобы увидеть, что приносит год. Без каких -либо дополнительных слов давайте перейдем прямо в бизнес.
Во -первых, вам понадобится приложение React. Создайте один сейчас, используя CLEATE-React-APP CLI. Если у вас уже есть приложение React, не стесняйтесь пропустить этот шаг. Я назвал свою облачную нагрузку, но не стесняйтесь быть немного более креативным с вашим.
Далее нам понадобится пара элементов. Кнопка для запуска процесса загрузки, элемент div для отображения выбранных изображений на экране. И некоторые штаты.
Для простоты я буду придерживаться внутреннего состояния, отсюда и использование в этой статье, но это должно быть легко подключить и к другим шаблонам управления состоянием (например, Redux -_-).
Теперь мы создадим наш родительский компонент. Я использую app.js. Очистите весь сгенерированный код и оставьте хороший и пустой компонент реагирования этой формы:
import React from 'react';
import './App.css';
function App() {
return (
);
}
export default App;
Далее мы импортируем usestate из пакета React и подготовим наше внутреннее состояние. Добавьте эту следующую строку в компонент приложения, непосредственно перед ключевым словом возврата:
const [images, setImages] = useState([]);
Поскольку я хочу сделать более одного изображения, я решил сделать свое состояние по умолчанию массивом. Все изображения, которые мы загружаем, будут храниться в этом массиве.
Затем мы создадим элемент React, который зацикливается на нашем массиве изображений и отображает их на фактический элемент.
{images.map(i => )}
Я решил использовать тег секции в качестве моего содержащего элемента. Не стесняйтесь, чтобы использовать то, что подходит вам лучше всего.
Далее мы создадим учетную запись о облачной, учитывая некоторые важные вещи.
После регистрации CloudAination попросит назначить вам общее «облачное имя». Пожалуйста, измените это на то, что вы можете запомнить, или, по крайней мере, обратите внимание на это или где -то запишите. Для моей учетной записи я выбрал имя облака: Emkaydee .
Основной интерес, который вы выбираете, не влияет на наши цели, поэтому выберите то, что кажется наиболее естественным.
Пройдите процесс адаптации с облачным образом или пропустите его, в любом случае вы попадаете на приборную панель в конце. Где вы найдете выбранное вами имя облака, и очень полезный ключ API.
Теперь, прежде чем что -либо еще, найдите страницу «Настройки», нажав на значок вашего профиля вверху в правом верхнем правом панели. Нажмите на значок передачи, и вы будете перенаправлены на страницу настроек.
Перейдите на вкладку «Загрузки».
Прокрутите здесь вниз и «включите Unsigned загрузку». Это генерирует предварительную настройку загрузки для вас. Неподписанная загрузка предустановка. Это означает, что вам не придется генерировать подпись каждый раз, когда вы хотите загружать изображение.
Измените название этой предустановки на что -то, что кажется немного более естественным. Я назову свою «загрузку», потому что почему бы и нет?
Теперь прокрутите внизу, чтобы сохранить ваши изменения.
Затем мы быстро перейдем на вкладку «Безопасность», и где она говорит «ограниченные типы носителей», мы решили не ограничивать никаких средств массовой информации.
Сделав это, снова прокрутите внизу, чтобы сохранить изменения и вернуться к приборной панели.
Теперь есть два облачных параметра, которые мы будем использовать в следующем разделе:
Ваше облачное имя. Мой “emkaydee ‘
Ваше загрузка предустановленное имя. Я назвал мою «загрузку»
Наконец -то пришло время вернуться к кодированию. Нам понадобится два пакета NPM: облачная реакция и Облачный ядер Анкет
Запустите эту команду в вашем терминале, чтобы получить их обоих:
npm i cloudinary-react cloudinary-core
Теперь импортируйте облачный контекст из облачной реакции и оберните компонент приложения с помощью его, передавая свое облачное имя в качестве опоры. При правильном выполнении, ваш файл app.js должен выглядеть так:
import React, {useState} from 'react';
import { CloudinaryContext } from "cloudinary-react";
import './App.css';
function App() {
const [images, setImages] = useState([])
return (
{images.map(i => )}
);
}
export default App;
Думайте об этом как о том, что позволяет нам открыть облачный виджет в любом месте нашего приложения, если этот компонент является дочерним составляющим компонента приложения.
Далее мы создадим файл UTIL в нашей папке SRC. Назовите этот файл CloudaryService.js. Он будет содержать вспомогательные методы, чтобы облегчить наши процессы загрузки и рендеринга.
Скопируйте следующий код в CloudaryService.js:
import { Cloudinary as CoreCloudinary, Util } from 'cloudinary-core';
export const url = (publicId, options) => {
const scOptions = Util.withSnakeCaseKeys(options);
const cl = CoreCloudinary.new();
return cl.url(publicId, scOptions);
};
export const openUploadWidget = (options, callback) => {
const scOptions = Util.withSnakeCaseKeys(options);
window.cloudinary.openUploadWidget(scOptions, callback);
};
export async function fetchPhotos (imageTag, setter) {
const options = {
cloudName: 'emkaydee',
format: 'json',
type: 'list',
version: Math.ceil(new Date().getTime() / 1000),
};
const urlPath = url(imageTag.toString(), options);
fetch(urlPath)
.then(res => res.text())
.then(text => (text ? setter(JSON.parse(text).resources.map(image => image.public_id)) : []))
.catch(err => console.log(err));
};
В fetchphotos Функция, где у меня есть Emkaydee в качестве моего CloudName, пожалуйста, обязательно замените его своим.
Далее мы импортируем оба эти помощника в App.js:
import { fetchPhotos, openUploadWidget } from "./CloudinaryService";
Далее мы добавим кнопку в App.js, чтобы запустить процесс загрузки вместе с новой функцией для нашего OnClick:
const beginUpload = tag => {
const uploadOptions = {
cloudName: "emkaydee",
tags: [tag],
uploadPreset: "upload"
};
openUploadWidget(uploadOptions, (error, photos) => {
if (!error) {
console.log(photos);
if(photos.event === 'success'){
setImages([...images, photos.info.public_id])
}
} else {
console.log(error);
}
})
}
Добавьте этот метод в Onclick нашей недавно созданной кнопки:
На данный момент все должно быть готово к работе. Но если мы попытаемся запустить наше приложение и нажмите кнопку, мы получим ошибку: window.cloudinary не определен. Это потому, что мы на самом деле не добавили пакет для самого компонента облачного виджета.
К сожалению, для написания этой статьи нет пакета NPM для написания этой статьи, поэтому нам нужно будет использовать обходной путь.
Для этого мы добавим тег сценария в index.html Файл в общедоступной папке. Итак, идите туда и добавьте этот сценарий в нижней части элемента «тела»:
Попробуйте открыть наш виджет сейчас, и он должен отображаться правильно. Вы можете даже попробовать загрузить изображение, и оно должно отображаться в вашей медиа -библиотеке на облачной.
Однако наше приложение React остается пустым без изображений?
Последняя часть этого урока получает загруженные изображения из нашей облачной учетной записи.
Добавьте простой эффект в App.js с нашим изящным Использоватьэффект Крюк, и в крючке, добавьте: fetchphotos ("Image", setimages);
Это все еще не заставляет наши изображения появляться. Потому что они не доставляются в качестве исходных ссылок, которые мы можем просто подключить к
Вместо этого мы будем использовать Изображение компонент из облачная реакция Анкет
В app.js, изменение:
{images.map(i =>
Чтобы использовать компонент изображения, который мы только что импортировали:
{images.map(i => )}
Если у нас все хорошо и правильно, файл app.js должен выглядеть так:
import React, {useState, useEffect} from 'react';
import { CloudinaryContext, Image } from "cloudinary-react";
import { fetchPhotos, openUploadWidget } from "./CloudinaryService";
import './App.css';
function App() {
const [images, setImages] = useState([])
const beginUpload = tag => {
const uploadOptions = {
cloudName: "emkaydee",
tags: [tag, 'anImage'],
uploadPreset: "upload"
};
openUploadWidget(uploadOptions, (error, photos) => {
if (!error) {
console.log(photos);
if(photos.event === 'success'){
setImages([...images, photos.info.public_id])
}
} else {
console.log(error);
}
})
}
useEffect( () => {
fetchPhotos("image", setImages);
}, [])
return (
{images.map(i =>
);
}
export default App;
Вот и все. Это весь урок. Ваше приложение теперь должно быть подключено к вашей облачной учетной записи. Если у вас есть какие -либо вопросы, пожалуйста, спросите в комментариях и отреагируйте на эту историю, если вы нашли это наименее полезным.
Оригинал: “https://dev.to/emkaydauda/uploading-images-to-cloudinary-with-a-react-app-4h47”