在vue中使用Base64转码的案例

在vue项目中有时会使用到Base6464转码,现将自己使用的一种方法记录,以供参考

1:安装依赖

npm install --save js-base64

2:在main.js中引入

?

1

2

3

4

5

const Base64 = require('js-base64').Base64

new Vue({

 el: '#app',

 Base64

})

3:在需要转码的文件中使用

?

1

2

3

const Base64 = require('js-base64').Base64

const exStr = Base64.encode('base64')

console.log(exStr) // 'YmFzZTY0'

补充知识:vue中使用base64和md5

1.在项目根目录下安装

cnpm install --save js-base64

cnpm install --save js-md5

2.在项目文件中引入

import md5 from 'js-md5';

let Base64 = require('js-base64').Base64;

3.在项目文件中使用

base64:

Base64.encode('dankogai'); // ZGFua29nYWk=

Base64.decode('ZGFua29nYWk='); // dankogai

md5:

md5(''); // d41d8cd98f00b204e9800998ecf8427e

eg:

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<script type="text/ecmascript-6">

 let Base64 = require('js-base64').Base64;    //Base64.encode('小飼弾');Base64.decode('ZGFua29nYWk=');

export default {

    data () {

      return {},

     },

     methods: {

       openFun: function(){

           let urlStr = "token=11526538-0059-4199-b35b-4e77263cdda9&pageId=31&unionId=165";

           urlStr = Base64.encode(urlStr);

       }

     }

}

</script>

以上这篇在vue中使用Base64转码的案例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持服务器之家。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 3 ,你可以使用 `FileReader` API 和一些辅助函数来将 Base64 编码的图片数据转换为 URL,以便显示在页面上。这是一个简单的示例: 首先,你需要安装一个依赖,如果你的项目还没有安装 `vue-file-loader`,可以通过 npm 或 yarn 来安装: ```bash npm install vue-file-loader @vue/cli-plugin-vuex --save-dev # 或者 yarn add vue-file-loader @vue/cli-plugin-vuex --dev ``` 然后,在你的项目配置文件(如 `vue.config.js`)配置 base64 图片处理: ```javascript // vue.config.js module.exports = { configureWebpack: { module: { rules: [ { test: /\.(png|jpe?g|gif)$/i, use: ['file-loader'], options: { esModule: false, name: 'static/images/[name].[hash:8].[ext]', }, }, ], }, }, }; ``` 接着,在你的 Vue 组件,可以这样实现 Base64 到 URL 的转换: ```html <!-- template.vue --> <template> <div> <img :src="decodeBase64Image(encodedImage)" alt="Decoded Image" /> </div> </template> <script setup> import { ref } from 'vue'; import { createReadStream } from 'fs/promises'; async function decodeBase64Image(base64Image) { const buffer = Buffer.from(atob(base64Image.replace(/^data:image\/\w+;base64,/, '')), 'binary'); const stream = createReadStream({ buffer }); return new Response(stream).blob().then(blob => URL.createObjectURL(blob)); } export default { data() { return { encodedImage: 'data:image/jpeg;base64,base64-encoded-data-goes-here', // 替换为实际的 Base64 数据 }; }, mounted() { this.$watch( () => this.encodedImage, async (newImage) => { if (newImage) { try { this.imageUrl = await decodeBase64Image(newImage); } catch (error) { console.error('Error decoding base64 image:', error); } } }, { deep: true, } ); }, }; </script> ``` 在这个例子,`decodeBase64Image` 函数会接收 Base64 字符串,将其转换为二进制数据,然后创建一个 ReadableStream,并返回一个包含 URL 的响应。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值