場(chǎng)景介紹：
- 添加時(shí)上傳圖片，獲取圖片F(xiàn)ile文件上傳至接口。
- 編輯時(shí)，直接將img標(biāo)簽中src設(shè)置成http url回顯圖片。
- 編輯時(shí)，不修改圖片，保存時(shí)，接口仍需要圖片的File文件格式。此時(shí)如果獲取圖片的File文件格式是個(gè)問(wèn)題。
以下步驟，針對(duì)如何將http url轉(zhuǎn)化為File格式做一個(gè)說(shuō)明。
（1）思路：
- 發(fā)起HTTP請(qǐng)求以獲取圖片數(shù)據(jù)
- 將獲取的數(shù)據(jù)轉(zhuǎn)換為Blob數(shù)據(jù)
- 使用Blob對(duì)象創(chuàng)建File對(duì)象
（2）解決方法：
-
需要后端配合提供接口，返回logo圖片
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-760987.html -
前端將返回值做處理文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-760987.html
let init: any = {
method: "get",
mode: "cors",
cache: "no-cache",
headers: {
"Content-Type": "application/octet-stream",
},
};
fetch(`/api/xxx/xxxx/${columnVal.id}/`, init)
.then((response) => {
return response.blob();
})
.then((blob) => {
// logoname為當(dāng)前圖片的名稱(chēng)，自行設(shè)置
let file = new File([blob], logoname, { type: blob.type });
// 更新 file參數(shù)，commonUpdate為自定義方法
commonUpdate({ logoContent: file });
})
.catch((e:any) => {
// 填入異常處理方法
});
- 注意事項(xiàng)：
（1）切記不要直接將http image url做File文件轉(zhuǎn)換，那是將url轉(zhuǎn)為File格式，并不是真正的拿到了image的信息?？梢酝ㄟ^(guò)上傳時(shí)圖片的size和轉(zhuǎn)換后的size做對(duì)比，可看到明顯區(qū)別
（2）如果不想采用這種方法，可以和后端溝通，接口傳參使用base64的格式，img src也接收base64直接展示，直接避免了上述問(wèn)題的出現(xiàn)。
到了這里，關(guān)于通過(guò)HTTP鏈接獲取圖片文件，并將其轉(zhuǎn)換為File格式的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
