当时有一个需求 是需要用到上传文件这个功能,并且需要将文件转为 base64 给到后台。网上找的全是啥图片转base64 肯定是因为这类需求比较常见。当时有点懵了。后面一想,都他娘是文件啊。然后就找到百度 Ctrl + C  -->  Ctrl +V

这里需要注意一点一定要做文件大小限定,如果文件太大转成base64还他娘的更大了,要注意 要注意

再说一下哦,既然是需要转 base64 那应该是不需要上传到服务器,前端自己本地转好 传后台 。文档中 说 action 为必填 解决方案如下

<el-upload
class="avatar-uploader"
action="#"
:show-file-list="false"
:http-request="httpRequest"
>
<el-input v-model.trim="item.secretKeyFileName" readonly></el-input>
<el-button type="primary" @click="getFile(index)">选取文件</el-button>
<div slot="tip" class="el-upload__tip">文件上传限制说明</div>
</el-upload>

action 参数 给它 #

咱自己定义一个 http-request   官网定义是:覆盖默认的上传行为,可以自定义上传的实现

现在撸转 base 64

主要是用到H5 方法中的 fileReader api。但是这个api不能return。那就promise一下吧

//这个file参数 也就是文件信息,你使用 插件 时 你就可以打印出文件信息 看看嘛
getBase64(file) {
return new Promise((resolve, reject) => {
let reader = new FileReader();
let fileResult = "";
reader.readAsDataURL(file);
     //开始转
reader.onload = function() {
fileResult = reader.result;
};
     //转 失败
reader.onerror = function(error) {
reject(error);
};
     //转 结束 咱就 resolve 出去
reader.onloadend = function() {
resolve(fileResult);
};
});
}

这里 就说说 刚刚 我们自定义 的上传

httpRequest(data){  // 没事儿就打印data看看呗
    //这是限制上传文件类型
const isPFX = data.file.type === "application/x-pkcs12";
const isLt2M = data.file.size / 1024 / 1024 < 2; if (!isPFX) {
this.$message.error("上传文件只能是 PFX 格式!");
}else if (!isLt2M) {
this.$message.error("上传文件大小不能超过 2MB!");
}else{
// 转base64
this.getBase64(data.file).then(resBase64 => {
this.fileBase64 = resBase64.split(',')[1]  //直接拿到base64信息
console.log(resBase64.split(',')[1])
})
this.$message.success('文件上传成功');
}

vue + element 文件上传 并将文件转 base64的更多相关文章

  1. 强大的支持多文件上传的jQuery文件上传插件Uploadify

    支持多文件上传的jQuery文件上传插件Uploadify,目前此插件有两种版本即Flash版本和HTML5版本,对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持Fla ...

  2. struts文件上传(多文件)

    第01步:配置web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app version= ...

  3. skymvc文件上传支持多文件上传

    skymvc文件上传支持多文件上传 支持单文件.多文件上传 可以设定 文件大小.存储目录.文件类型 //上传的文件目录 $this->upload->uploaddir="att ...

  4. SpringMVC单文件上传、多文件上传、文件列表显示、文件下载(转)

    林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 本文详细讲解了SpringMVC实例单文件上传.多文件上传.文件列表显示.文件下载. 本文工程 ...

  5. yii2.0单文件上传和多文件上传

    yii2文件上传使用到yii2自带的文件上传类UploadFIle,以及对应的模型规则,这里分别介绍单文件上传和多文件上传: yii2单个文件上传: 上传步奏,先创建上传表单模型model(包含验证规 ...

  6. 使用PHP实现文件上传和多文件上传

    PHP 2013 年 9 月 4 日 暂无评论 在PHP程序开发中,文件上传是一个使用非常普遍的功能,也是PHP程序员的必备技能之一.值得高兴的是,在PHP中实现文件上传功能要比在Java.C#等语言 ...

  7. Struts1文件上传、单文件、多文件上传【Struts1】

     将struts1文件上传的操作汇总了一下,包括单文件上传和多文件上传,内容如下,留作备忘: Struts2实现文件上传的文章(http://blog.csdn.net/itwit/article/d ...

  8. (29)Spring boot 文件上传(多文件上传)【从零开始学Spring Boot】

    文件上传主要分以下几个步骤: (1)新建maven java project: (2)在pom.xml加入相应依赖: (3)新建一个表单页面(这里使用thymleaf); (4)编写controlle ...

  9. SpringMVC文件上传下载(单文件、多文件)

    前言 大家好,我是bigsai,今天我们学习Springmvc的文件上传下载. 文件上传和下载是互联网web应用非常重要的组成部分,它是信息交互传输的重要渠道之一.你可能经常在网页上传下载文件,你可能 ...

随机推荐

  1. .NET 跨域问题解决

    后端处理:var callback=context.Request.QueryString["callback"].ToString(); context.Response.Wri ...

  2. 分布式Redis深度历险-复制

    Redis深度历险分为两个部分,单机Redis和分布式Redis. 本文为分布式Redis深度历险系列的第一篇,主要内容为Redis的复制功能. Redis的复制功能的作用和大多数分布式存储系统一样, ...

  3. 去除数组空格 php

    public function trimArray($params){ if (!is_array($params)) return trim($params); return array_map([ ...

  4. DotNet Core管道通信

    前言 在之前,我们需要明确的一个概念是, Web 程序中,用户的每次请求流程都是线性的,放在 ASP.NET Core 程序中,都会对应一个 请求管道(request pipeline),在这个请求管 ...

  5. 如何在Etherscan.io 部署ETH以太坊智能合约 如何在15分钟内创建你的加密货币

    一.概述 ETH 网络这里就不介绍了,这篇文章主要记录在以太坊主网和测试网络部署一个智能合约,也就是如何发币. 二.部署合约需要的生产工具      准备工具前,建议大家准备个VPN,因为会访问国外网 ...

  6. Visual Studio的UTF-8问题

    参考:https://www.jianshu.com/p/c51cbb2f20e1 一.在“工具”菜单找到“自定义”,然后按照图示操作. 二.选择“编码”.

  7. 7-剑指offer: 二维数组中的查找

    题目描述 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数 ...

  8. JS高阶---闭包面试题

    [面试题1] 答案:The Window 分析: 本案例里,不存在闭包. 条件: .函数嵌套(满足) .内部函数调用外部函数变量(没有) 综上所述,该例中不存在闭包 [面试题2] 答案:My Obje ...

  9. python requests访问https的链接,不打开fiddler的情况下不报错;若是打开fiddler则报ssl错误,请求中添加verify=False,会报警告;若不想看到警告,有3种方式;

    import requests# import warnings# warnings.filterwarnings("ignore") #方法一#requests.packages ...

  10. LVS(二):四种工作模型

    面试的时候必问这个四种工作模式,因为这几乎是企业里面必用的内容,所以一定要将其理解通透. 一.lvs-nat模式 二.LVS-DR模式(默认) 三.LVS-tun模式 四.LVS-fullnat模式 ...