Vue3 圖片或視頻下載跨域或文件損壞的解決方法
- 修改跨域配置文件
- 下載方法
修改跨域配置文件
修改vite.config.ts文件proxy里面寫跨域地址，如下圖，圖片地址就是我們要跨域的目標地址：
下載方法
如下就是我取消上面那句后的報錯
然后調用兩個方法即可：
//下載
const downloadCallback = () => {const url = mediaItem?.mediaUrl.replace("http://www.aaa(注意這里是需要替換的地址)", "/download")downloadFile(url, mediaItem?.name ?? '下載' ) // 調用方法一// downloadImg(url)// 調用方法二
}//方法一
const downloadFile = (fileUrl:string, fileName:string) => {fetch(fileUrl).then(res =>res.blob().then((blob) => {const a = document.createElement('a')const url = window.URL.createObjectURL(blob)a.href = urla.download = fileNamea.click()window.URL.revokeObjectURL(url)}),)
}//方法二
const downloadImg = (url:string) => {axios({url, //URL,根據實際情況來 method: "get", responseType: "blob"}).then((response)=> { console.log('response',response)const link = document.createElement("a"); let blob = new Blob([response.data], { type: response.data.type }); let url = URL.createObjectURL(blob); link.href = url; link.download = mediaItem?.name ?? '下載'; link.click(); window.URL.revokeObjectURL(url)});
}
記錄一下工作中的小問題，自助助人！
)
)