如何在 React 應用程序中在 Cloudinary 上託管圖像文件
許多應用程序的內容都依賴於網絡。通過在第三方雲平台上託管圖像資產，您可以確保您的應用程序能夠快速、高效地訪問它們。
此外，您將避免使用本地服務器託管資產而產生的存儲和帶寬成本。這就是像 Cloudinary 這樣的圖像託管雲解決方案變得越來越流行的原因。
繼續學習如何使用 Cloudinary 來託管您的圖像資產。
什麼是圖像託管，為什麼它很重要？
圖像託管是一種網絡託管服務，允許您在第三方雲平台上存儲和訪問您的圖像資產或其他數字媒體。
圖像等媒體資產對於為任何 Web 應用程序創建出色的用戶體驗至關重要。圖像託管服務使您可以輕鬆地從雲端上傳、存儲、檢索和管理您的資產，從而通過確保更快的加載時間和更好的圖像質量來提高應用程序的性能。
什麼是雲？
Cloudinary 是一個基於雲的媒體管理平台。它提供的功能使您可以輕鬆上傳、存儲和管理圖像和視頻等數字媒體資產。從本質上講，Cloudinary 可以更輕鬆地從一個平台管理任何應用程序所需的所有數字媒體。
設置 Cloudinary 項目以託管圖像文件
要開始上傳和託管圖像文件，請註冊一個Cloudinary帳戶。
登錄到您的帳戶儀表板，然後單擊左側菜單窗格中的設置圖標選項卡。
在設置頁面上，單擊上傳按鈕以打開上傳設置頁面。
現在，轉到上傳預設設置部分並單擊添加上傳預設為您的應用程序創建一個新的上傳預設。
上傳預設是一種參數配置，用於定義您在 Cloudinary 上上傳的任何媒體文件的默認結構。它們允許您定義一組規則，以便在您每次上傳媒體文件時應用。
預設參數確保 Cloudinary 優化所有媒體文件以交付給您的應用程序，從而提高性能並減少加載時間。
填寫您的預設名稱，然後從顯示的下拉菜單中選擇無符號模式。簽名模式允許您指定 Cloudinary 用於驗證和授權任何媒體上傳的方法。
選擇未簽名模式將使您能夠從您的應用程序上傳到您的 Cloudinary 存儲而無需使用 Cloudinary 進行身份驗證。簡而言之，此模式允許您選擇一張圖片，然後直接從您的應用程序上傳。Cloudinary 然後將根據要求交付它。
進行這些更改後，繼續並單擊“保存”以創建上傳預設。
創建一個演示 React 應用程序
您可以設置一個簡單的 React 應用程序來使用 Cloudinary API 端點和上傳小部件來處理上傳功能。
首先，創建一個演示 React 應用程序。接下來，運行以下命令啟動開發服務器並在瀏覽器上導航到 http://localhost:3000 以查看結果。
npm start
接下來，運行此命令來安裝 Axios，這是一個用於從瀏覽器發出 HTTP 請求的 JavaScript 庫。
npm install axios
使用 Cloudinary API 端點上傳圖像文件
設置 React 應用程序後，創建一個上傳組件，該組件向 Cloudinary 的 API 端點發出 POST 請求，以將圖像文件上傳到 Cloudinary 雲存儲。然後，您將解構 API 響應以顯示上傳的圖像。
創建上傳組件
在 /src 目錄中，創建一個新文件夾並將其命名為 components。在此文件夾中，創建一個新文件 Upload.js。
在 Upload.js 文件中，添加以下代碼：
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;
這是上傳代碼的作用：
- 聲明兩個狀態，uploadFile和cloudinaryImage。它使用這些來存儲上傳的文件和來自 Cloudinary 的結果圖像。
- 輸入字段允許您從機器的文件系統中選擇圖像文件。選擇文件時，它會更新 uploadFile 變量的值。
- handleUpload函數使用 Axios 向 Cloudinary 發出 post 請求。它傳遞上傳的文件和您與 Cloudinary 雲帳戶相關聯的上傳預設。單擊提交按鈕調用此函數。
- 當代碼收到響應時，它會將Cloudinary圖像的 secure_url 存儲在狀態中。
- 最後，它呈現兩個部分，一個用於上傳文件，另一個用於顯示生成的圖像。
在您的 app.js 文件中導入並呈現 upload.js 組件。選擇並上傳圖像文件後，您應該會在瀏覽器中看到類似這樣的響應：
轉到您的 Cloudinary 帳戶，然後單擊“媒體庫”選項卡以查看上傳的文件。
使用 Cloudinary Widget 上傳圖像文件
在 React 應用程序中集成 Cloudinary 小部件可以顯著簡化上傳過程。此外，該小部件允許您從各種來源（例如 Dropbox）上傳圖像文件。
要將小部件集成到您的 React 應用程序中，首先，您需要將小部件的遠程 JavaScript 庫包含在 /public 目錄下的 index.html 文件中。在 index.html 文件的 head 部分添加下面的腳本標籤。
<script src="https://upload-widget.cloudinary.com/global/all.js"
type="text/javascript"></script>
接下來，在您的 upload.js 文件中，添加進行以下更改：
- 導入以下 React 掛鉤：useEffect 和 useRef。
import {useState, useEffect, useRef} from 'react'; - 添加以下代碼：
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)
});
}, []); - 最後，創建一個按鈕，單擊該按鈕將調用並打開上傳小部件。
<button onClick = { () => widgetRef.current.open()} >
Upload Via Widget
</button>
充分利用 Cloudinary
Cloudinary 提供了一種用戶友好的解決方案，可簡化管理圖像文件和其他媒體資產的過程。
除了提供雲存儲平台，Cloudinary 還提供圖像轉換和圖像優化等功能。這些是提高媒體資產質量的重要工具。
發佈留言