前端element ui 文件base64加密字符串 上传
<el-form-item label="附件" prop="attachment">
<el-upload
:multiple="false"
:limit="1"
:on-exceed="handleExceed"
:http-request="uploadFiles"
:on-remove="handleRemoveFj"
action=" "
>
<el-button slot="trigger" size="small" type="primary" >选择文件</el-button>
<el-button v-show="formData.attachment != null" > <a :href="'http:/localhost:8080/file'+formData.attachment">查看文件</a></el-button>
</el-upload>
</el-form-item>
//图片上传数量校验
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 1 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);
},
//取消上传文件
handleRemoveFj(file,fileList){
this.formData.fileContent = null;
}, //文件上传
uploadFiles(data) {
// this.formData.fileUpdate=1; //更新状态 改为已更新
this.formData.fileName = data.file.name; //文件名
this.formData.fileType = "updateNoticeFile";
this.getBase64(data.file).then(resBase64 => {
this.formData.fileContent = resBase64.split(',')[1]
console.info(this.formData.fileContent)
console.info(this.formData.fileContent.length) })
}, //文件转base64
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);
};
});
},
前端element ui 文件base64加密字符串 上传的更多相关文章
- 移动前端—H5实现图片先压缩再上传
在做移动端图片上传的时候,用户传的都是手机本地图片,而本地图片一般都相对比较大,拿iphone6来说,平时拍很多图片都是一两M的,如果直接这样上传,那图片就太大了,如果用户用的是移动流量,完全把图片上 ...
- 求大师点化,寻求大文件(最大20G左右)上传方案
之前仿造uploadify写了一个HTML5版的文件上传插件,没看过的朋友可以点此先看一下~得到了不少朋友的好评,我自己也用在了项目中,不论是用户头像上传,还是各种媒体文件的上传,以及各种个性的业务需 ...
- JS代码实用代码实例(输入框监听,点击显示点击其他地方消失,文件本地预览上传)
前段时间写前端,遇到一些模块非常有用,总结以备后用 一.input框字数监听 <!DOCTYPE html> <html lang="en"> <he ...
- SpringMVC上传压缩文件,解压文件,并检测上传文件中是否有index.html
SpringMVC上传压缩文件,解压文件,并检测上传文件中是否有index.html 说明: 1.环境:SpringMVC+Spring+Tomcat7+JDK1.7 2.支持 zip和rar格式的压 ...
- js上传文件带参数,并且,返回给前台文件路径,解析上传的xml文件,存储到数据库中
ajaxfileupload.js jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId ...
- Web.Config文件配置之限制上传文件大小和时间
在邮件发送系统或者其他一些传送文件的网站中,用户传送文件的大小是有限制的,因为这样不但可以节省服务器的空间,还可以提高传送文件的速度.下面介绍如何在Web.Config文件中配置限制上传文件大小与时间 ...
- [html5+java]文件异步读取及上传核心代码
html5+java 文件异步读取及上传关键代码段 功能: 1.多文件文件拖拽上传,file input 多文件选择 2.html5 File Api 异步FormData,blob上传,图片显示 3 ...
- 使用swfupload上传超过30M文件,使用FLASH上传组件
原文:使用swfupload上传超过30M文件,使用FLASH上传组件 前一段时间会员的上传组件改用FLASH的swfupload来上传,既能很友好的显示上传进度,又能完全满足大文件的上传. 后来服务 ...
- PHP之文件的锁定、上传与下载
小结文件的锁定机制.上传和下载 1.文件锁定 现在都在讲究什么分布式.并发等,实际上文件的操作也是并发的,在网络环境下,多个用户在同一时刻访问页面,对同一服务器上的同一文件进行着读取,如果,这个用户刚 ...
- ASP.NET MVC 使用Uploadify实现多文件异步无刷新上传
软件技术开发,合作请联系QQ:858-048-581 这里我通过使用uploadify组件来实现异步无刷新多文件上传功能. 1.首先下载组件包uploadify,我这里使用的版本是3.1 2.下载后解 ...
随机推荐
- Quartz 2D CGPattern学习笔记
CGPattern是在图形上下文中重复绘制的一系列绘制操作.你可以像使用颜色一样使用图案.当使用CGPattern进行绘制时,Quartz将页面划分为一组图案单元格,每个单元格的大小为CGPatter ...
- IO学习笔记7
2.4 多路复用javaAPI 在上面我们简单java代码实现了多路复用,是一个单线程版的.讲上面的epoll代码复制到linux服务器中,使用strace追踪系统调用. javaAPI会根据系统类型 ...
- DBeaver导入SQL脚本数据
DBeaver导入SQL脚本数据 起因 Navicat Premium还原备份的导致数据库中文乱码 看Navicat Premium中看中文数据,是正常显示了,但是在IEDA查询和Web页面上显示,均 ...
- IaaS--云虚拟机(一)(何恺铎《深入浅出云计算》笔记整理)
[概念讲解] 云虚拟机的体系结构,就是全面解耦的计算存储分离的设计思想. 传统的虚拟化,往往是对单一物理机器资源的纵向切割,计算.存储.网络等各方面的能力都是一台物理机的子集.因此,从可伸缩性的角度来 ...
- 调度器45—wake_affine
基于 Linux-5.10 一.wake_affine 简介 1. 背景 在进程唤醒选核路径中, wake_affine 倾向于将被唤醒进程(wakee)尽可能安排在 waker所在 CPU 上, 这 ...
- SVN: E155004: THERE ARE UNFINISHED WORK ITEMS IN ''; RUN 'SVN CLEANUP' FIRST
eclipse的SVN更新或者还原都报错 使用clean up也不好用 解决办法 通过网址https://www.sqlite.org/download.html下载这个软件 解压放到.svn文件夹下 ...
- 第二周day6
第二周day6,星期六 所花时间:0 代码量:0 搏客量:1 了解到的知识点:多锻炼.
- 配置全局路由表和VRF路由表之间的路由泄漏
1.拓扑图 2.R1配置 R1#sho run Building configuration... Current configuration : 1360 bytes ! upgrade fpd a ...
- .NetCore自定义模板,发布Nuget
1.创建模板项目框架 2.创建模板文件 在项目文件夹根目录创建.template.config文件夹,在文件夹下创建新的文件:template.json 内容如下 { "$schema&qu ...
- ID生成器实现方式的优缺点比较以及最优的ID生成器原理剖析
引用:https://blog.csdn.net/luoyang_java/article/details/90679456 本文的重点主要是ID发号器相关的知识,介绍了雪花算法,以及他的基本原理和实 ...