input file文件上传转base64格式

<input ref="fileinput" type="file" accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event)">

js

uploadImg (e) {
            const file = e.target.files[0];
            this.fileType = file.type
            if (!['image/png', 'image/jpg', 'image/gif', 'image/jpeg'].includes(this.fileType)) {
                this.$Message.error('请上传正确的图片')
                return
            }
            if (file.size > 20 * 1024 * 1024) {
                this.$Message.error('请选择20M以内的图片')
                return
            }
            if (typeof FileReader === 'function') {
                const reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = (event) => {
                    var Base64Val = event.target.result;
                    console.log( Base64Val)
                }
            } else {
                alert('对不起，您的浏览器暂不支持此功能！');
            }
        }

方法二

 <el-form-item label="服务图标：" prop="serviceName" class="formItem">
      <el-button size="mini" type="reset" icon="el-icon-plus" @click="$refs.serviceImgDom.value = ''; $refs.serviceImgDom.click()"></el-button>
       <img :src="serviceIcon" style="width: 60px;">
       <input type="file" ref="serviceImgDom" style="display: none;" accept=".png;.jpeg;.svg;" @change="imgUpload">
    </el-form-item>

data中定义  serviceIcon serviceName

methods

imgUpload(e) {
    let file = e.target.files[0];
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => {
       console.log(reader.result); // base64
       this.serviceIcon = reader.result;
    }
     reader.onerror = function(err) {
            console.log(err);
        }
    },

二、base64转成File文件对象（base64—>File文件对象）

/**
 * base64图片转file的方法（base64图片, 设置生成file的文件名）
 * @param {*} base64 
 * @param {*} fileName 
 * @returns 
 */
function base64ToFile(base64, fileName) {
    let data = base64.split(',');
    let type = data[0].match(/:(.*?);/)[1];
    let suffix = type.split('/')[1];
    const bstr = window.atob(data[1]);
    let n = bstr.length;
    const u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
    }
    // 利用构造函数创建File文件对象
    const file = new File([u8arr], `${fileName}.${suffix}`, {
        type: type
    });
    return file;
}

三、base64转成文件下载（base64—> blob）

downMailDataEncrypt(base64data) {
   var blob = dataURLtoBlob(base64data);
    
   const a = document.createElement("a");
   const objectUrl = URL.createObjectURL(blob);
   a.setAttribute("href", objectUrl);
   a.setAttribute("download", "test.txt");
   a.click();
   URL.revokeObjectURL(a.href); // 释放url
   // base64转blob
   function dataURLtoBlob(dataurl) {
          var arr = dataurl.split(','),
             // mime = arr[0].match(/:(.*?);/)[1],
             bstr = atob(arr[0]),
             n = bstr.length,
             u8arr = new Uint8Array(n);
          while (n--) {
             u8arr[n] = bstr.charCodeAt(n);
         }
         return new Blob([u8arr], { type: 'vkd' });
    }
}

四、File文件对象转成二进制流

// 上传文件File文件对象转成二进制流
fileUpload(e) {
    let file = e.target.files[0];
    // 前端转换成二进制流
    let that = this;
    var reader = new FileReader();
    reader.onload = function (e) {
        var arrayBuffer = e.target.result;
        that.fileData = arrayBuffer;
    };
    reader.readAsArrayBuffer(file);
}

五、应用场景：响应文件流前端js通过blob生成下载链接

// 文件流res下载
// 流转 blob
var blob = new window.Blob([res], { type: 'application/x-msdownload' });

const a = document.createElement("a");
const objectUrl = URL.createObjectURL(blob);
a.setAttribute("href", objectUrl);
a.setAttribute("download", "test.txt");
a.click();
URL.revokeObjectURL(a.href); // 释放url