Vue文件如何轉(zhuǎn)換成base64并去除多余的文件類型前綴
更新時(shí)間：2024年03月07日 10:27:24 作者：mpbtxdy
這篇文章主要介紹了Vue文件如何轉(zhuǎn)換成base64并去除多余的文件類型前綴問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue文件轉(zhuǎn)換成base64并去除多余的文件類型前綴
頁面上傳圖片、文檔、pdf甚至是jar包
比較常用所以記錄一下
<FormItem label="請(qǐng)選取文件：" :label-width="240">
<!-- 我是上傳文件后，出現(xiàn)另一個(gè)按鈕實(shí)現(xiàn)上傳動(dòng)作的，所以action里沒有內(nèi)容，這里只把base64準(zhǔn)備好 -->
<Upload :before-upload="handleUpload" action >
<Button icon="ios-cloud-upload-outline" type="warning">上傳文件</Button>
</Upload>
</FormItem>
handleUpload(file) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = e => {
//去除多余的文件類型前綴
this.fileData = e.target.result.replace(/data.+?;base64,/, "");
};
//返回ture 或者 resolve 都會(huì)去調(diào)action里的地址，所以返回false，通過另一個(gè)按鈕點(diǎn)擊上傳再調(diào)用上傳接口
return false;
},vue的url圖片轉(zhuǎn)base64
調(diào)用
this.getBase64(item).then((base64) => {
console.log("圖片");
})方法
getBase64(img) {
function getBase64Image(img, width, height) {
//width、height調(diào)用時(shí)傳入具體像素值，控制大小 ,不傳則默認(rèn)圖像大小
let canvas = document.createElement("canvas");
canvas.width = width ? width : img.width;
canvas.height = height ? height : img.height;
let ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
let dataURL = canvas.toDataURL();
return dataURL;
}總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue實(shí)現(xiàn)表格中對(duì)數(shù)據(jù)進(jìn)行轉(zhuǎn)換、處理的方法
這篇文章主要介紹了Vue實(shí)現(xiàn)表格中對(duì)數(shù)據(jù)進(jìn)行轉(zhuǎn)換、處理的方法,需要的朋友可以參考下2018-09-09
前端vue項(xiàng)目打包成桌面端exe應(yīng)用的簡(jiǎn)單步驟
Electron是一個(gè)開源的框架,用于構(gòu)建跨平臺(tái)的桌面應(yīng)用程序,這篇文章主要介紹了前端vue項(xiàng)目打包成桌面端exe應(yīng)用的簡(jiǎn)單步驟,文中給出詳細(xì)的代碼示例,需要的朋友可以參考下2025-06-06
這篇文章主要為大家詳細(xì)介紹了vue3封裝側(cè)導(dǎo)航文字骨架效果組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
swiper/vue 獲取 swiper實(shí)例方法詳解
在網(wǎng)上搜了一下如何調(diào)用swiper實(shí)例,大部分都是通過 swiperRef = new Swiper(‘.swiper’, options) 這種方法初始化swiper,然后直接能用 swiperRef 實(shí)例,這篇文章主要介紹了swiper/vue 獲取 swiper實(shí)例方法詳解,需要的朋友可以參考下2023-12-12
Vue腳手架搭建及創(chuàng)建Vue項(xiàng)目流程的詳細(xì)教程
Vue腳手架指的是vue-cli,它是一個(gè)快速構(gòu)建**單頁面應(yīng)用程序(SPA)**環(huán)境配置的工具，cli是(command-line-interfac)命令行界面,下面這篇文章主要給大家介紹了關(guān)于Vue腳手架搭建及創(chuàng)建Vue項(xiàng)目流程的相關(guān)資料,需要的朋友可以參考下2022-09-09
vue實(shí)現(xiàn)文章評(píng)論和回復(fù)列表
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)文章評(píng)論和回復(fù)列表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
Vant?如何修改van-collapse-item右側(cè)圖標(biāo)
這篇文章主要介紹了Vant?如何修改van-collapse-item右側(cè)圖標(biāo)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue項(xiàng)目打包優(yōu)化的方法實(shí)戰(zhàn)記錄
最近入職了新公司,接手了一個(gè)新拆分出來的Vue項(xiàng)目,針對(duì)該項(xiàng)目做了個(gè)打包優(yōu)化,把經(jīng)驗(yàn)分享出來,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目打包優(yōu)化的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
Vue3實(shí)現(xiàn)組件通信的14種方式詳解與實(shí)戰(zhàn)
在Vue3中,組件通信仍然是一個(gè)非常重要的話題,因?yàn)樵诖蠖鄶?shù)應(yīng)用程序中,不同的組件之間需要進(jìn)行數(shù)據(jù)傳遞和交互,在Vue3中,組件通信有多種方式可供選擇,本文給大家介紹了Vue3實(shí)現(xiàn)組件通信的14種方式,需要的朋友可以參考下2025-08-08
vue和uniapp頁面實(shí)現(xiàn)自動(dòng)滾動(dòng)到最底部
這篇文章主要介紹了vue和uniapp頁面實(shí)現(xiàn)自動(dòng)滾動(dòng)到最底部方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05