快捷導(dǎo)航

vue項(xiàng)目base64轉(zhuǎn)img方式

更新時(shí)間：2022年04月09日 15:36:38 作者：嗷嗚~

這篇文章主要介紹了vue項(xiàng)目base64轉(zhuǎn)img方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

base64轉(zhuǎn)img方式

輸入框：

? ? ? <el-input
? ? ? ? class="input-box"
? ? ? ? ref="elInputText"
? ? ? ? type="textarea"
? ? ? ? v-model="content"
? ? ? ? @paste.native="onPasteEvent"
? ? ? ? @keydown.native.enter.prevent="handlerKeyupEnter"
? ? ? ></el-input>

設(shè)定一個(gè) dialog 彈框。

? ? <!-- 圖片預(yù)覽dialog -->
? ? <el-dialog
? ? ? title="圖片預(yù)覽"
? ? ? :visible.sync="previewImgObj.show"
? ? ? v-if="previewImgObj.show"
? ? ? append-to-body
? ? >
? ? ? <img
? ? ? ? width="100%"
? ? ? ? v-if="previewImgObj.imgUrl"
? ? ? ? class="ly-margin-center"
? ? ? ? :src="previewImgObj.imgUrl"
? ? ? ? v-image-view
? ? ? />
? ? ? <span slot="footer" class="dialog-footer">
? ? ? ? <el-button @click="previewImgObj.show = false">取 消</el- button>
? ? ? ? <el-button type="primary" @click="sendBase64ImgMessge">確 定</el-button>
? ? ? </span>
? ? </el-dialog>
? ? // 監(jiān)聽(tīng)粘貼事件
? ? async onPasteEvent(e) {
? ? ? e.preventDefault();
? ? ? let data = await addEventPasteListener(e);
? ? ? ?if (data.type === "string") {
? ? ? ? // 復(fù)制某條消息
? ? ? ? if (!data.string) return;
? ? ? ? // console.log(data.string)
? ? ? ? // 正則表達(dá)式判斷data是否是base64
? ? ? ? function validDataUrl(s) {
? ? ? ? ? return validDataUrl.regex.test(s);
? ? ? ? }
? ? ? ? validDataUrl.regex = /^\s*data:([a-z]+\/[a-z0-9-+.]+(;[a-z-]+=[a-z0-9-]+)?)?(;base64)?,([a-z0-9!$&',()*+;=\-._~:@\/?%\s]*?)\s*$/i;
? ? ? ? // 如果是base64轉(zhuǎn)換成圖片預(yù)覽
? ? ? ? if (validDataUrl(data.string)) {
? ? ? ? ? let that = this;
? ? ? ? ? function previwImg(item) {
? ? ? ? ? ? that.previewImgObj = {
? ? ? ? ? ? ? show: true,
? ? ? ? ? ? ? imgUrl: item
? ? ? ? ? ? };
? ? ? ? ? }
? ? ? ? ? previwImg(data.string);
? ? ? ? }
? ? ?}

效果展示

base64和jpg/png互轉(zhuǎn)

base64的轉(zhuǎn)換

在中調(diào)用base64格式的照片

方式一

<image :src="getBase64(base64)"/>

getBase64(base64){
? ? var changebase64='data:image/jpg;base64,'+base64.replace(/[\r\n]/g,'')
? ? console.log(changebase64)
? ? return changebase64
? ?},

方式二：vue -element 在image組件中直接調(diào)用base64

? ? <el-table :data="devicePersonData" >
? ? ? <el-table-column label="照片">
? ? ? ? <template ?#default="scope">
? ? ? ? <el-image style="width: 60px;border-radius: 6px"
? ? ? ? ? ? ? ? ? :src="getBase64(scope.row.base64)"></el-image>
? ? ? ? </template>
? ? ? </el-table-column>
? ? ? <el-table-column
? ? ? ? label="姓名"
? ? ? ? prop="name">
? ? ? </el-table-column>
? ? ? </el-table-column>
? ? </el-table>

?// 轉(zhuǎn)換base64
getBase64 (base64) {
? return 'data:image/png;base64,' + base64
}

方式三：Element UI 中將上傳的圖片轉(zhuǎn)換成base64

<el-upload
? class="avatar-uploader"
? action="company/update"
? :headers="headers"
? :auto-upload="false"
? :data="logoData"
? :show-file-list="false"
? :on-change="getFile">
</el-upload>

// <el-upload>組件中的on-change事件（將獲取到的照片文件去轉(zhuǎn)換為base64）
getFile (file, fileList) {
? ? //這里使用'.then()'去獲取Promise的返回結(jié)果
? this.changeBase64(file.raw).then(res => {
? ? this.imageUrl = res
? })
},
?//將獲取到的照片文件去轉(zhuǎn)換為base64
changeBase64 (file) {
? return new Promise(function (resolve, reject) {
? ? const reader = new FileReader()
? ? let imgResult = ''
? ? reader.readAsDataURL(file)
? ? reader.onload = function () {
? ? ? imgResult = reader.result
? ? }
? ? reader.onerror = function (error) {
? ? ? reject(error)
? ? }
? ? reader.onloadend = function () {
? ? ? resolve(imgResult)
? ? }
? })
},
? ? // 因?yàn)檗D(zhuǎn)換后的base64是帶頭部的，如果需要去掉則可以使用replace（）去替換
? ? const Base64 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA......"
? ??? ?// place(serchValue:/搜索字符串/，replaceValue:'替換字符串')
? ? Base64.replace(/^data:image\/\w+;base64,/, '')

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: