vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue文件转换成base64去除多余文件类型前缀

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

作者: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;
  }

总结

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

您可能感兴趣的文章:
阅读全文