Vue文件如何轉(zhuǎn)換成base64并去除多余的文件類型前綴
更新時(shí)間：2024年03月07日 10:27:24 作者：mpbtxdy
這篇文章主要介紹了Vue文件如何轉(zhuǎn)換成base64并去除多余的文件類型前綴問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue文件轉(zhuǎn)換成base64并去除多余的文件類型前綴
頁(yè)面上傳圖片、文檔、pdf甚至是jar包
比較常用所以記錄一下
<FormItem label="請(qǐng)選取文件：" :label-width="240">
<!-- 我是上傳文件后，出現(xiàn)另一個(gè)按鈕實(shí)現(xiàn)上傳動(dòng)作的，所以action里沒(méi)有內(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，通過(guò)另一個(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)固定定位圖標(biāo)滑動(dòng)隱藏效果
移動(dòng)端頁(yè)面，有時(shí)候會(huì)出現(xiàn)一些固定定位在底部圖標(biāo)，比如購(gòu)物車等。這篇文章主要介紹了Vue制作固定定位圖標(biāo)滑動(dòng)隱藏效果,需要的朋友可以參考下2019-05-05
el-form表單el-form-item驗(yàn)證規(guī)則里prop一次驗(yàn)證兩個(gè)或多個(gè)值問(wèn)題
這篇文章主要介紹了el-form表單el-form-item驗(yàn)證規(guī)則里prop一次驗(yàn)證兩個(gè)或多個(gè)值問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vue自定義指令用法經(jīng)典實(shí)例小結(jié)
這篇文章主要介紹了vue自定義指令用法,結(jié)合實(shí)例形式總結(jié)分析了vue自定義指令常見(jiàn)寫(xiě)法與相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-03-03
這篇文章主要介紹了在Vue2中注冊(cè)全局組件的兩種方法,非常的細(xì)致,需要的朋友可以參考下2022-07-07
vue中如何使用echarts和echarts-gl實(shí)現(xiàn)3D餅圖環(huán)形餅圖
現(xiàn)在vue是很多公司前端的主流框架,我目前所在公司接觸的項(xiàng)目也都是使用vue來(lái)實(shí)現(xiàn)的,很少有完全使用原生的JavaScript來(lái)寫(xiě)項(xiàng)目的了,下面這篇文章主要給大家介紹了關(guān)于vue中如何使用echarts和echarts-gl實(shí)現(xiàn)3D餅圖環(huán)形餅圖的相關(guān)資料,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了vue傳值方式的十二種方法總結(jié),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
Vue簡(jiǎn)化用戶查詢/添加功能的實(shí)現(xiàn)
本文主要介紹了Vue簡(jiǎn)化用戶查詢/添加功能的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
這篇文章主要介紹了vue父組件異步傳遞props值,子組件接收不到解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Element?Plus?去掉表格外邊框的實(shí)現(xiàn)代碼
使用el-table組件拖拽時(shí),?想使用自定義樣式進(jìn)行拖拽,?想去掉外邊框,?并在表頭加入豎杠樣式,本文給大家介紹Element?Plus?去掉表格外邊框的實(shí)現(xiàn)代碼,感興趣的朋友一起看看吧2025-04-04
這篇文章主要介紹了基于vue實(shí)現(xiàn)分頁(yè)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11