Cách tải tệp lên bộ nhớ Firebase bằng React.js
Bộ nhớ Firebase cung cấp một cách đơn giản để lưu trữ dữ liệu do người dùng tạo như hình ảnh, video và tệp âm thanh. Nó tích hợp với xác thực Firebase, vì vậy bạn có thể kiểm soát ai có quyền truy cập vào các tệp.
Bạn có thể lưu trữ một lượng lớn nội dung bằng cách sử dụng Firebase vì nó tự động thay đổi tỷ lệ để phù hợp với nhu cầu của bạn. Nó đơn giản để sử dụng với khuôn khổ của bên thứ ba như thư viện JavaScript React
Mục Lục
Thiết lập dự án
Để tải tệp lên bộ nhớ Firebase, bạn cần tạo một biểu mẫu web cho phép người dùng chọn tệp từ hệ thống tệp.
Bắt đầu bằng cách tạo một ứng dụng React bằng cách sử dụng create-react-app. Chạy lệnh này để tạo một dự án React được gọi là firebase-upload:
npx create-react-app firebase-upload
Để đơn giản, bạn chỉ cần một nút đầu vào chấp nhận tệp và một nút tải lên. Thay thế nội dung của App.js với đoạn mã sau.
import {useState} from "react"function App() {
const [file, setFile] = useState("");
// Handles input change event and updates state
function handleChange(event) {
setFile(event.target.files[0]);
}
return (
<div>
<input type="file" accept="image/*" onChange={handleChange}/>
<button>Upload to Firebase</button>
</div>
);
}
export default App;
Trong đoạn mã trên, đầu vào thẻ của Chấp nhận thuộc tính được đặt thành chỉ cho phép hình ảnh. Các handleChange () chức năng xử lý thay đổi đầu vào và cập nhật trạng thái để lưu trữ tệp đã chọn.
Thiết lập Firebase
Trước khi tải tệp lên bộ nhớ Firebase, bạn cần tạo một dự án Firebase.
Tạo dự án Firebase
Làm theo hướng dẫn bên dưới để tạo dự án Firebase:
- Truy cập trang bảng điều khiển Firebase và nhấp vào Thêm dự án hoặc Tạo một dự án (nếu bạn đang tạo một dự án lần đầu tiên).
- Đặt tên cho dự án của bạn và nhấp vào Còn nữa.
- Bỏ chọn Google Analytics vì bạn không cần nó cho dự án này và nhấp vào Tạo dự án.
- Nhấp chuột Còn nữa khi dự án đã sẵn sàng.
- Bấm vào biểu tượng web trên trang tổng quan của dự án để đăng ký ứng dụng web.
- Đặt biệt hiệu cho ứng dụng của bạn và nhấp vào Đăng ký.
- Sao chép đối tượng cấu hình được cung cấp. Bạn sẽ cần nó để kết nối ứng dụng của mình với Firebase.
Tạo nhóm lưu trữ đám mây
Firebase lưu trữ tệp trong nhóm lưu trữ đám mây. Làm theo các bước sau để tạo nó:
- Trên trang tổng quan về dự án, hãy nhấp vào Kho trên bảng điều hướng bên trái.
- Nhấp chuột Bắt đầu và chọn chê độ kiểm tra.
- Chọn vị trí bộ chứa bộ nhớ mặc định và nhấp vào Xong.
Bây giờ, bạn đã sẵn sàng để bắt đầu tải tệp lên bộ nhớ Firebase.
Thêm Firebase vào React
Trong thiết bị đầu cuối của bạn, điều hướng đến thư mục dự án React của bạn. Chạy lệnh sau để cài đặt SDK Firebase:
npm install firebase
Tạo một tệp mới, firebaseConfig.jsvà khởi chạy Firebase.
import { initializeApp } from "firebase/app";
import { getStorage } from "firebase/storage";
const app = initializeApp ({
apiKey: <apiKey>,
authDomain: <authDomain>,
projectId: <projectId>,
storageBucket: <storageBucket>,
messagingSenderId: <messagingSenderId>,
appId: <appId>,
measurementId: <measurementId>,
});
const storage = getStorage(app);
export default storage;
Sử dụng đối tượng cấu hình bạn có sau khi tạo dự án Firebase để khởi chạy ứng dụng Firebase.
Dòng cuối cùng xuất tham chiếu bộ nhớ Firebase để bạn có thể truy cập phiên bản đó từ phần còn lại của ứng dụng.
Tạo một hàm xử lý để tải hình ảnh lên Firebase
Nhấp vào nút tải lên sẽ kích hoạt chức năng chịu trách nhiệm tải tệp lên bộ nhớ Firebase. Hãy tạo chức năng đó.
Trong App.jsthêm chức năng xử lý. Trong hàm này, hãy kiểm tra xem tệp có trống không vì người dùng có thể nhấp vào nút tải lên trước khi chọn tệp. Nếu tệp không tồn tại, hãy đưa ra cảnh báo yêu cầu người dùng tải tệp lên trước.
function handleUpload() {
if (!file) {
alert("Please choose a file first!")
}
}
Nếu tệp tồn tại, hãy tạo tham chiếu bộ nhớ. Tham chiếu bộ nhớ hoạt động như một con trỏ đến tệp trong Đám mây mà bạn muốn vận hành.
Bắt đầu bằng cách nhập dịch vụ lưu trữ bạn đã tạo trong firebaseConfig.js tập tin.
import storage from "./firebaseConfig.js"
Nhập khẩu ref từ phiên bản lưu trữ Firebase và chuyển vào dịch vụ lưu trữ và đường dẫn tệp làm đối số.
import {ref} from "firebase/storage"function handleUpload() {
if (!file) {
alert("Please choose a file first!")
}
const storageRef = ref(storage, `/files/${file.name}`)
}
Tiếp theo, tạo tác vụ tải lên bằng cách chuyển phiên bản bộ nhớ Firebase vào uploadBytesResumable () hàm số. Có một số phương pháp bạn có thể sử dụng, nhưng phương pháp cụ thể này cho phép bạn tạm dừng và tiếp tục tải lên. Nó cũng hiển thị các bản cập nhật tiến độ.
Các uploadBytesResumable () hàm chấp nhận tham chiếu bộ nhớ và tệp để tải lên.
import {
ref,
uploadBytesResumable
} from "firebase/storage";function handleUpload() {
if (!file) {
alert("Please choose a file first!")
}
const storageRef = ref(storage, `/files/${file.name}`)
const uploadTask = uploadBytesResumable(storageRef, file);
}
Để theo dõi tiến trình và xử lý lỗi khi tệp tải lên, hãy lắng nghe các thay đổi trạng thái, lỗi và quá trình hoàn thành.
import {
ref,
uploadBytesResumable,
getDownloadURL
} from "firebase/storage";function handleUpload() {
if (!file) {
alert("Please choose a file first!")
}
const storageRef = ref(storage,`/files/${file.name}`)
const uploadTask = uploadBytesResumable(storageRef, file);
uploadTask.on(
"state_changed",
(snapshot) => {
const percent = Math.round(
(snapshot.bytesTransferred / snapshot.totalBytes) * 100
);
setPercent(percent);
},
(err) => console.log(err),
() => {
getDownloadURL(uploadTask.snapshot.ref).then((url) => {
console.log(url);
});
}
);
}
Đây, state_changed sự kiện có ba chức năng gọi lại. Trong chức năng đầu tiên, bạn đang theo dõi tiến trình tải lên và tải lên trạng thái tiến trình. Trong chức năng gọi lại thứ hai, xử lý lỗi nếu tải lên không thành công.
Chức năng cuối cùng sẽ chạy sau khi quá trình tải lên hoàn tất và nhận được URL tải xuống, sau đó hiển thị nó trên bảng điều khiển. Trong một ứng dụng đời thực, bạn có thể lưu nó vào cơ sở dữ liệu.
Bạn có thể hiển thị trạng thái tiến trình của quá trình tải lên bằng cách sử dụng trạng thái phần trăm. Cũng thêm một trong một cái nhấp chuột sự kiện trên nút tải lên để kích hoạt xử lý hàm số.
import { useState } from "react";function App() {
const [percent, setPercent] = useState(0);
return (
<div>
<input type="file" onChange={handleChange} accept="" />
<button onClick={handleUpload}>Upload to Firebase</button>
<p>{percent} "% done"</p>
</div>
)
}
Đây là mã hoàn chỉnh cho App.js:
import { useState } from "react";
import { storage } from "./firebaseConfig";
import { ref, uploadBytesResumable, getDownloadURL } from "firebase/storage";function App() {
const [file, setFile] = useState("");
const [percent, setPercent] = useState(0);
function handleChange(event) {
setFile(event.target.files[0]);
}
const handleUpload = () => {
if (!file) {
alert("Please upload an image first!");
}
const storageRef = ref(storage, `/files/${file.name}`);
const uploadTask = uploadBytesResumable(storageRef, file);
uploadTask.on(
"state_changed",
(snapshot) => {
const percent = Math.round(
(snapshot.bytesTransferred / snapshot.totalBytes) * 100
);
setPercent(percent);
},
(err) => console.log(err),
() => {
getDownloadURL(uploadTask.snapshot.ref).then((url) => {
console.log(url);
});
}
);
};
return (
<div>
<input type="file" onChange={handleChange} accept="/image/*" />
<button onClick={handleUpload}>Upload to Firebase</button>
<p>{percent} "% done"</p>
</div>
);
}
export default App;
Làm được nhiều việc hơn với bộ nhớ Firebase
Tải lên tệp là một trong những tính năng cơ bản nhất của bộ nhớ Firebase. Tuy nhiên, có những thứ khác mà bộ nhớ Firebase cho phép bạn làm. Bạn có thể truy cập, hiển thị, sắp xếp và xóa các tệp của mình.
Trong một ứng dụng phức tạp hơn, bạn có thể muốn xác thực người dùng để cấp cho họ quyền chỉ tương tác với các tệp của họ.
Đọc tiếp
Giới thiệu về tác giả
