Day 42/100 #100DaysOfCode #React #PHP
Hôm nay mình sẽ tích hợp React + PHP để thực hiện một nhiệm vụ, đó là upload một tấm hình lên, sau đó resize nó thành nhiều kích thước mà mình muốn
Trong bài viết trước, mình có chia sẻ với mọi người về cách thực hiện việc upload image resize trong php, bạn nào chưa có xem có thể xem thêm tại đây nhé:
Trong bài viết hôm nay minh sẽ lấy source PHP trước đó, bạn có thể tải source tại đây nhé: Github: https://github.com/skipperhoa/upload-image-resize-in-php
Okay, Đầu tiên cũng như mọi khi ta cũng cần một project React kkk ::)
//tạo project với tên là "basic" npx create-react-app basic // trỏ tới thư mục và chạy nó thôi cd basic npm start
Tiếp theo khi đã có một project rồi thì việc còn lại là tạo file component để chạy nó thôi ::), okay tạo file tên gì cũng được, mình sẽ đặt tên là UploadImage.js
import React,{useState} from 'react'
export default function UploadImage() {
let URL = "http://localhost/BackendPHP/upload-image.php";
const [pathImage, setPathImage] = useState("");
const [selectedFile,setSelectedFile] = useState();
const [preview, setPreview] = useState()
const chooseFile = (e) => {
if (!e.target.files || e.target.files.length === 0) {
setSelectedFile(undefined)
return
}
setSelectedFile(e.target.files[0])
const reader = new FileReader();
reader.onloadend = () => {
setPreview(reader.result)
}
if (e.target.files[0]) {
setPathImage(e.target.value)
reader.readAsDataURL(e.target.files[0]);
setPreview(reader.result)
}
else {
setPreview(undefined)
}
}
const uploadImage = (e) => {
e.preventDefault();
if(pathImage!=""){
const _formData = new FormData();
_formData.append("UrlImage", selectedFile);
const requestOptions = {
method: 'POST',
body: _formData
};
fetch(URL, requestOptions)
.then(res => res.json())
.then(json =>{
console.log(json);
}
);
}
}
return (
<div className='w-full max-w-4xl mx-auto'>
<h2 className='text-center text-white text-2xl py-5'>Upload Image using React + PHP</h2>
{selectedFile && <img src={preview} alt="avatar" className="w-auto mx-auto block mb-5" />}
<form className='flex flex-row items-center justify-center' onSubmit={uploadImage}>
<label className="text-white text-sm">Choose file image : </label>
<input type="text" placeholder="File name" className='ml-1 w-56 p-1 rounded-sm' value={pathImage }/>
<input type="file" className='ml-1 rounded-sm text-sm p-1 w-24' onChange={(e)=>chooseFile(e)}/>
<button className='bg-green-600 text-white text-sm p-1 rounded-sm' type="submit">Upload file</button>
</form>
</div>
)
}
Trong đoạn code bên trên mình có thiết lập một số như sau:
+ Tạo đường dẫn URL trỏ tới thư mục BackendPHP của mình, các bạn download source của mình trên github về và giải nén nó vào thư mục backend của mấy bạn là được.
let URL = "http://localhost/BackendPHP/upload-image.php";
+ Tạo một số state lưu các thông tin của file image khi ta chọn một tấm hình
//đường dẫn chọn tấm hình
const [pathImage, setPathImage] = useState("");
//lưu file mà ta đã chọn
const [selectedFile,setSelectedFile] = useState();
// giúp ta hiện thị tấm hình vừa chọn
const [preview, setPreview] = useState()
+ Tạo một function để chọn file lên
const chooseFile = (e) => {
if (!e.target.files || e.target.files.length === 0) {
setSelectedFile(undefined)
return
}
setSelectedFile(e.target.files[0])
const reader = new FileReader();
reader.onloadend = () => {
setPreview(reader.result)
}
if (e.target.files[0]) {
setPathImage(e.target.value)
reader.readAsDataURL(e.target.files[0]);
setPreview(reader.result)
}
else {
setPreview(undefined)
}
}
+ Khi ta đã xử lý việc chọn file lên và lưu các thông tin cần thiết vào các state rồi, thì việc còn lại là ta cần phải gửi thông tin đó đến Backend PHP của ta , để xử lý việc upload tấm hình lên và resize nó, lưu nó, sau đó trả kết quả thông báo về cho ta biết, việc thực hiện có thành công hay không.
+ Tạo một function để xử lý nó thôi, chúng ta add thông tin file đến FormData nhé, ở đây mình dùng phương thức "POST"
const uploadImage = (e) => {
e.preventDefault();
if(pathImage!=""){
const _formData = new FormData();
_formData.append("UrlImage", selectedFile);
const requestOptions = {
method: 'POST',
body: _formData
};
fetch(URL, requestOptions)
.then(res => res.json())
.then(json =>{
console.log(json);
}
);
}
}
+ Cuối cùng là ta render giao diện ra cho người dùng xem và tích hợp một số function đến các nút chọn file, submit, preview tấm hình vừa chọn thôi
<div className='w-full max-w-4xl mx-auto'>
<h2 className='text-center text-white text-2xl py-5'>Upload Image using React + PHP</h2>
{selectedFile && <img src={preview} alt="avatar" className="w-auto mx-auto block mb-5" />}
<form className='flex flex-row items-center justify-center' onSubmit={uploadImage}>
<label className="text-white text-sm">Choose file image : </label>
<input type="text" placeholder="File name" className='ml-1 w-56 p-1 rounded-sm' value={pathImage }/>
<input type="file" className='ml-1 rounded-sm text-sm p-1 w-24' onChange={(e)=>chooseFile(e)}/>
<button className='bg-green-600 text-white text-sm p-1 rounded-sm' type="submit">Upload file</button>
</form>
</div>
Các bạn có thể phát triển source trên bằng cách gửi nhiều file đến backend xử lý việc upload một tấm hình!