Cách lưu trữ tệp hình ảnh trên Cloudinary trong ứng dụng React
Nhiều ứng dụng phụ thuộc vào web cho nội dung của chúng. Bằng cách lưu trữ nội dung hình ảnh trên nền tảng đám mây của bên thứ ba, bạn có thể đảm bảo rằng ứng dụng của mình có quyền truy cập nhanh và hiệu quả vào chúng.
Hơn nữa, bạn sẽ tránh được chi phí lưu trữ và băng thông mà bạn phải chịu khi lưu trữ nội dung bằng máy chủ tại chỗ. Đây là lý do tại sao các giải pháp đám mây lưu trữ hình ảnh như Cloudinary ngày càng trở nên phổ biến.
Hãy làm theo để tìm hiểu cách sử dụng Cloudinary để lưu trữ nội dung hình ảnh của bạn.
Mục Lục
Lưu trữ hình ảnh là gì và tại sao nó lại quan trọng?
Lưu trữ hình ảnh là một loại dịch vụ lưu trữ web cho phép bạn lưu trữ và truy cập nội dung hình ảnh của mình hoặc phương tiện kỹ thuật số khác trên nền tảng đám mây của bên thứ ba.
Nội dung phương tiện như hình ảnh rất cần thiết trong việc tạo trải nghiệm người dùng tuyệt vời cho bất kỳ ứng dụng web nào. Dịch vụ lưu trữ hình ảnh giúp bạn dễ dàng tải lên, lưu trữ, truy xuất và quản lý nội dung của mình từ đám mây, do đó, nâng cao hiệu suất ứng dụng của bạn bằng cách đảm bảo thời gian tải nhanh hơn và chất lượng hình ảnh tốt hơn.
Đám mây là gì?
Cloudinary là một nền tảng quản lý phương tiện dựa trên đám mây. Nó cung cấp các tính năng giúp bạn dễ dàng tải lên, lưu trữ và quản lý nội dung phương tiện kỹ thuật số như hình ảnh và video. Về cơ bản, Cloudinary giúp quản lý tất cả phương tiện kỹ thuật số cần thiết cho bất kỳ ứng dụng nào từ một nền tảng dễ dàng hơn.
Thiết lập dự án đám mây để lưu trữ tệp hình ảnh
Để bắt đầu tải lên và lưu trữ tệp hình ảnh, hãy đăng ký tài khoản Cloudinary.
Đăng nhập vào bảng điều khiển tài khoản của bạn và nhấp vào tab biểu tượng cài đặt trên ngăn menu bên trái.
Trên trang cài đặt, nhấp vào Tải lên để mở trang cài đặt tải lên.
Bây giờ, đi đến Tải lên giá trị đặt trước phần cài đặt và nhấp vào Thêm cài đặt trước tải lên để tạo cài đặt trước tải lên mới cho ứng dụng của bạn.
Giá trị đặt trước tải lên là cấu hình gồm các tham số xác định cấu trúc mặc định của bất kỳ tệp phương tiện nào bạn tải lên trên Cloudinary. Chúng cho phép bạn xác định một bộ quy tắc để áp dụng mỗi khi bạn tải tệp phương tiện lên.
Các tham số đặt trước đảm bảo rằng Cloudinary tối ưu hóa tất cả các tệp phương tiện để phân phối tới ứng dụng của bạn, cải thiện hiệu suất và giảm thời gian tải.
Điền vào tên của cài đặt trước của bạn và chọn chưa ký chế độ từ trình đơn thả xuống được hiển thị. Các chế độ ký cho phép bạn chỉ định các phương thức mà Cloudinary sử dụng để xác thực và cho phép bất kỳ nội dung tải lên phương tiện nào.
Việc chọn chế độ chưa ký sẽ cho phép bạn thực hiện tải lên bộ nhớ Cloudinary từ các ứng dụng của mình mà không cần xác thực với Cloudinary. Nói một cách đơn giản, chế độ này cho phép bạn chọn một hình ảnh và tải nó lên trực tiếp từ ứng dụng của bạn. Cloudinary sau đó sẽ cung cấp nó theo yêu cầu.
Sau khi thực hiện những thay đổi đó, hãy tiếp tục và nhấp vào Tiết kiệm để tạo cài đặt trước tải lên.
Tạo ứng dụng Demo React
Bạn có thể thiết lập một ứng dụng React đơn giản để xử lý chức năng tải lên bằng cách sử dụng điểm cuối API Cloudinary và tiện ích tải lên.
Để bắt đầu, hãy tạo một ứng dụng React demo. Tiếp theo, hãy chạy lệnh bên dưới để khởi động máy chủ phát triển và điều hướng đến http://localhost:3000 trên trình duyệt của bạn để xem kết quả.
npm start
Tiếp theo, hãy chạy lệnh này để cài đặt Axios, một thư viện JavaScript được sử dụng để thực hiện các yêu cầu HTTP từ trình duyệt.
npm install axios
Tải lên tệp hình ảnh bằng điểm cuối API đám mây
Sau khi thiết lập ứng dụng React, hãy tạo thành phần tải lên tạo yêu cầu POST tới điểm cuối API của Cloudinary để tải tệp hình ảnh lên bộ nhớ đám mây Cloudinary. Sau đó, bạn sẽ hủy cấu trúc phản hồi API để hiển thị hình ảnh đã tải lên.
Tạo một thành phần tải lên
Trong thư mục /src, tạo một thư mục mới và đặt tên là components. Trong thư mục này, tạo một tệp mới, Upload.js.
Trong tệp Upload.js, hãy thêm mã bên dưới:
import React, {useState} from 'react';
import Axios from "axios";function Upload() {
const [uploadFile, setUploadFile] = useState("");
const [cloudinaryImage, setCloudinaryImage] = useState("")
const handleUpload = (e) => {
e.preventDefault();
const formData = new FormData ();
formData.append("file", uploadFile);
formData.append("upload_preset", "your upload preset name");
Axios.post(
"https://api.cloudinary.com/v1_1/your Cloudinary cloud name/image/upload",
formData
)
.then((response) => {
console.log(response);
setCloudinaryImage(response.data.secure_url);
})
.catch((error) => {
console.log(error);
});
};
return (
<div className="App">
<section className="left-side">
<form>
<h3> Upload Images to Cloudinary Cloud Storage</h3>
<div>
<input type="file"
onChange ={(event) => {setUploadFile(event.target.files[0]);}}
/>
</div>
<button onClick = {handleUpload}> Upload File</button>
</form>
</section>
<section className="right-side">
<h3>The resulting image will be displayed here</h3>
{cloudinaryImage && ( <img src={cloudinaryImage} /> )}
</section>
</div>
);
}
export default Upload;
Đây là những gì mã tải lên thực hiện:
- Tuyên bố hai trạng thái, cập nhật dử liệu Và đám mâyHình ảnh. Nó sử dụng những thứ này để lưu trữ tệp đã tải lên và hình ảnh thu được từ Cloudinary.
- Trường đầu vào cho phép bạn chọn tệp hình ảnh từ hệ thống tệp của máy. Khi bạn chọn một tệp, nó sẽ cập nhật giá trị của biến uploadFile.
- Các xử lýTải lên chức năng sử dụng Axios để gửi yêu cầu đăng lên Cloudinary. Nó chuyển vào tệp đã tải lên và cài đặt trước tải lên mà bạn đã liên kết với tài khoản đám mây Cloudinary của mình. Nhấp vào nút gửi sẽ gọi chức năng này.
- Khi mã nhận được phản hồi, nó sẽ lưu trữ safe_url của hình ảnh Cloudinary ở trạng thái.
- Cuối cùng, nó hiển thị hai phần, một phần để tải tệp lên và phần còn lại để hiển thị hình ảnh thu được.
Nhập và hiển thị thành phần upload.js trong tệp app.js của bạn. Bạn sẽ thấy phản hồi như thế này trong trình duyệt của mình sau khi chọn và tải tệp hình ảnh lên:
Truy cập tài khoản Cloudinary của bạn và nhấp vào Thư viện phương tiện tab để xem tệp đã tải lên.
Việc tích hợp tiện ích Cloudinary trong ứng dụng React của bạn sẽ đơn giản hóa đáng kể quá trình tải lên. Ngoài ra, tiện ích này cho phép bạn tải lên các tệp hình ảnh từ nhiều nguồn khác nhau, chẳng hạn như Dropbox.
Để tích hợp tiện ích trong ứng dụng React của bạn, trước tiên, bạn cần đưa thư viện JavaScript từ xa của tiện ích vào tệp index.html trong thư mục /public. Thêm thẻ tập lệnh bên dưới vào phần đầu trong tệp index.html của bạn.
<script src="https://upload-widget.cloudinary.com/global/all.js"
type="text/javascript"></script>
Tiếp theo, trong tệp upload.js của bạn, hãy thêm những thay đổi sau:
- Nhập các hook React sau: useEffect và useRef.
import {useState, useEffect, useRef} from 'react'; - Thêm mã dưới đây:
const cloudinaryRef = useRef();
const widgetRef = useRef();useEffect(() => {
cloudinaryRef.current = window.cloudinary;
widgetRef.current = cloudinaryRef.current.createUploadWidget({
cloudName: 'your cloudinary cloud name',
uploadPreset: 'the upload preset name'
}, (error, result) => {
console.log(error, result)
});
}, []);Đoạn mã trên tạo một tham chiếu đến đối tượng Cloudinary và tiện ích tải lên bằng móc useRef. Móc useEffect chạy mã bên trong hàm gọi lại một lần khi thành phần được gắn kết. Sau đó, bạn khởi tạo tiện ích bằng tên đám mây của mình và tải lên tên đặt trước, đồng thời ghi nhật ký các kết quả và lỗi có thể xảy ra từ tiện ích.
- Cuối cùng, tạo một nút mà khi được nhấp vào sẽ gọi và mở tiện ích tải lên.
<button onClick = { () => widgetRef.current.open()} >
Upload Via Widget
</button>
Tận dụng tối đa Cloudinary
Cloudinary cung cấp giải pháp thân thiện với người dùng, giúp đơn giản hóa quy trình quản lý tệp hình ảnh và các nội dung phương tiện khác.
Ngoài việc cung cấp nền tảng lưu trữ đám mây, Cloudinary còn cung cấp các tính năng như chuyển đổi hình ảnh và tối ưu hóa hình ảnh. Đây là những công cụ cần thiết để nâng cao chất lượng nội dung phương tiện của bạn.