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制作固定定位图标滑动隐藏效果,需要的朋友可以参考下
    2019-05-05
  • el-form表单el-form-item验证规则里prop一次验证两个或多个值问题

    el-form表单el-form-item验证规则里prop一次验证两个或多个值问题

    这篇文章主要介绍了el-form表单el-form-item验证规则里prop一次验证两个或多个值问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • vue自定义指令用法经典实例小结

    vue自定义指令用法经典实例小结

    这篇文章主要介绍了vue自定义指令用法,结合实例形式总结分析了vue自定义指令常见写法与相关操作注意事项,需要的朋友可以参考下
    2019-03-03
  • 在Vue2中注册全局组件的两种方法详解

    在Vue2中注册全局组件的两种方法详解

    这篇文章主要介绍了在Vue2中注册全局组件的两种方法,非常的细致,需要的朋友可以参考下
    2022-07-07
  • vue中如何使用echarts和echarts-gl实现3D饼图环形饼图

    vue中如何使用echarts和echarts-gl实现3D饼图环形饼图

    现在vue是很多公司前端的主流框架,我目前所在公司接触的项目也都是使用vue来实现的,很少有完全使用原生的JavaScript来写项目的了,下面这篇文章主要给大家介绍了关于vue中如何使用echarts和echarts-gl实现3D饼图环形饼图的相关资料,需要的朋友可以参考下
    2023-03-03
  • vue传值方式的十二种方法总结

    vue传值方式的十二种方法总结

    这篇文章主要介绍了vue传值方式的十二种方法总结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • Vue简化用户查询/添加功能的实现

    Vue简化用户查询/添加功能的实现

    本文主要介绍了Vue简化用户查询/添加功能的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-01-01
  • vue父组件异步传递props值,子组件接收不到解决方案

    vue父组件异步传递props值,子组件接收不到解决方案

    这篇文章主要介绍了vue父组件异步传递props值,子组件接收不到解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Element Plus 去掉表格外边框的实现代码

    Element Plus 去掉表格外边框的实现代码

    使用el-table组件拖拽时, 想使用自定义样式进行拖拽, 想去掉外边框, 并在表头加入竖杠样式,本文给大家介绍Element Plus 去掉表格外边框的实现代码,感兴趣的朋友一起看看吧
    2025-04-04
  • 基于vue实现分页效果

    基于vue实现分页效果

    这篇文章主要介绍了基于vue实现分页效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11

最新评论