Vue文件如何转换成base64并去除多余的文件类型前缀

 更新时间:2024年03月07日 10:27:24   作者:mpbtxdy  
这篇文章主要介绍了Vue文件如何转换成base64并去除多余的文件类型前缀问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue文件转换成base64并去除多余的文件类型前缀

页面上传图片、文档、pdf甚至是jar包

比较常用所以记录一下

 
 <FormItem label="请选取文件:" :label-width="240">
 <!--  我是上传文件后,出现另一个按钮实现上传动作的,所以action里没有内容,这里只把base64准备好 -->
   <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 都会去调action里的地址,所以返回false,通过另一个按钮点击上传再调用上传接口
      return false;
    },

vue的url图片转base64

调用

this.getBase64(item).then((base64) => {
    console.log("图片");
})

方法

getBase64(img) {
  function getBase64Image(img, width, height) {
    //width、height调用时传入具体像素值,控制大小 ,不传则默认图像大小
    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;
  }

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue实现表格中对数据进行转换、处理的方法

    Vue实现表格中对数据进行转换、处理的方法

    这篇文章主要介绍了Vue实现表格中对数据进行转换、处理的方法,需要的朋友可以参考下
    2018-09-09
  • 前端vue项目打包成桌面端exe应用的简单步骤

    前端vue项目打包成桌面端exe应用的简单步骤

    Electron是一个开源的框架,用于构建跨平台的桌面应用程序,这篇文章主要介绍了前端vue项目打包成桌面端exe应用的简单步骤,文中给出详细的代码示例,需要的朋友可以参考下
    2025-06-06
  • vue3封装侧导航文字骨架效果组件

    vue3封装侧导航文字骨架效果组件

    这篇文章主要为大家详细介绍了vue3封装侧导航文字骨架效果组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • swiper/vue 获取 swiper实例方法详解

    swiper/vue 获取 swiper实例方法详解

    在网上搜了一下如何调用swiper实例,大部分都是通过 swiperRef = new Swiper(‘.swiper’, options) 这种方法初始化swiper,然后直接能用 swiperRef 实例,这篇文章主要介绍了swiper/vue 获取 swiper实例方法详解,需要的朋友可以参考下
    2023-12-12
  • Vue脚手架搭建及创建Vue项目流程的详细教程

    Vue脚手架搭建及创建Vue项目流程的详细教程

    Vue脚手架指的是vue-cli,它是一个快速构建**单页面应用程序(SPA)**环境配置的工具,cli是(command-line-interfac)命令行界面,下面这篇文章主要给大家介绍了关于Vue脚手架搭建及创建Vue项目流程的相关资料,需要的朋友可以参考下
    2022-09-09
  • vue实现文章评论和回复列表

    vue实现文章评论和回复列表

    这篇文章主要为大家详细介绍了vue实现文章评论和回复列表,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • Vant 如何修改van-collapse-item右侧图标

    Vant 如何修改van-collapse-item右侧图标

    这篇文章主要介绍了Vant 如何修改van-collapse-item右侧图标,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue项目打包优化的方法实战记录

    vue项目打包优化的方法实战记录

    最近入职了新公司,接手了一个新拆分出来的Vue项目,针对该项目做了个打包优化,把经验分享出来,下面这篇文章主要给大家介绍了关于vue项目打包优化的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • Vue3实现组件通信的14种方式详解与实战

    Vue3实现组件通信的14种方式详解与实战

    在Vue3中,组件通信仍然是一个非常重要的话题,因为在大多数应用程序中,不同的组件之间需要进行数据传递和交互,在Vue3中,组件通信有多种方式可供选择,本文给大家介绍了Vue3实现组件通信的14种方式,需要的朋友可以参考下
    2025-08-08
  • vue和uniapp页面实现自动滚动到最底部

    vue和uniapp页面实现自动滚动到最底部

    这篇文章主要介绍了vue和uniapp页面实现自动滚动到最底部方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-05-05

最新评论