★ 背景說明 在瀏覽器環境中，由於安全性限制，不能直接將網路圖片地址轉換成 File 對象。File 對象是用戶在客戶端上傳文件時才能創建的，而不能由前端代碼直接將網路圖片地址轉換成 File 對象。 ★ 解決方案 如果你想要將網路圖片地址轉換成 Fie 對象，你需要先將圖片下載到客戶端，然後再將其 ...
★ 背景說明
在瀏覽器環境中，由於安全性限制，不能直接將網路圖片地址轉換成 File 對象。File 對象是用戶在客戶端上傳文件時才能創建的，而不能由前端代碼直接將網路圖片地址轉換成 File 對象。
★ 解決方案
如果你想要將網路圖片地址轉換成 Fie 對象，你需要先將圖片下載到客戶端，然後再將其轉換為 File 對象。這可以通過以下步驟完成:
1. 使用 Axios(或其他網路請求庫)下載圖片數據。
2. 將下載的數據轉換成 Blob 對象。
3. 創建一個新的 File 對象，將 Blob 對象放入其中。
★ 功能封裝
// 將網路圖片地址轉換為File對象
async function imageUrlToFile(url, fileName) {
try {
// 第一步：使用axios獲取網路圖片數據
const response = await axios.get(url, { responseType: 'arraybuffer' })
const imageData = response.data
// 第二步：將圖片數據轉換為Blob對象
const blob = new Blob([imageData], {
type: response.headers['content-type']
})
// 第三步：創建一個新的File對象
const file = new File([blob], fileName, { type: blob.type })
return file
} catch (error) {
console.error('將圖片轉換為File對象時發生錯誤:', error)
throw error
}
}
★ 代碼示例
<!doctype html>
<html>
<head>
<title>網路圖片地址轉換為File對象</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
/*
關於在script中使用await的語句報錯的解決說明:
commonjs規範無法像ES模塊直接使用頂層await,必須搭配async關鍵字使用
解決辦法: 將使用await的語句，用 (async () =>())() 的自執行函數包裹起來
(async () => {
const config = {...}
await esbuild.context(config);
})();
*/
(async () => {
// 將網路圖片地址轉換為File對象
async function imageUrlToFile(url, fileName) {
try {
// 第一步：使用axios獲取網路圖片數據
const response = await axios.get(url, {responseType: 'arraybuffer'})
const imageData = response.data
// 第二步：將圖片數據轉換為Blob對象
const blob = new Blob([imageData], {
type: response.headers['content-type']
})
// 第三步：創建一個新的File對象
const file = new File([blob], fileName, {type: blob.type})
return file
} catch (error) {
console.error('將圖片轉換為File對象時發生錯誤:', error)
throw error
}
}
const imgUrl = 'https://gips3.baidu.com/it/u=3886271102,3123389489&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960'
const file = await imageUrlToFile(imgUrl, 'girl')
// URL.createObjectURL(file) 將文件對象轉換為本地預覽的地址進行預覽
const fileUrl = URL.createObjectURL(file)
console.log(file, fileUrl)
})()
</script>
</body>
</html>
★ 結果分析
File {name: 'girl', lastModified: 1719682659397, lastModifiedDate: Sun Jun 30 2024 01:37:39 GMT+0800 (中國標準時間), webkitRelativePath: '', size: 185786, …}
blob:http://localhost:63342/27225c8a-56f2-45a6-9c7d-54468d9b8758'
