<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加密字符串 上传的更多相关文章

  1. 移动前端—H5实现图片先压缩再上传

    在做移动端图片上传的时候,用户传的都是手机本地图片,而本地图片一般都相对比较大,拿iphone6来说,平时拍很多图片都是一两M的,如果直接这样上传,那图片就太大了,如果用户用的是移动流量,完全把图片上 ...

  2. 求大师点化,寻求大文件(最大20G左右)上传方案

    之前仿造uploadify写了一个HTML5版的文件上传插件,没看过的朋友可以点此先看一下~得到了不少朋友的好评,我自己也用在了项目中,不论是用户头像上传,还是各种媒体文件的上传,以及各种个性的业务需 ...

  3. JS代码实用代码实例(输入框监听,点击显示点击其他地方消失,文件本地预览上传)

    前段时间写前端,遇到一些模块非常有用,总结以备后用 一.input框字数监听 <!DOCTYPE html> <html lang="en"> <he ...

  4. SpringMVC上传压缩文件,解压文件,并检测上传文件中是否有index.html

    SpringMVC上传压缩文件,解压文件,并检测上传文件中是否有index.html 说明: 1.环境:SpringMVC+Spring+Tomcat7+JDK1.7 2.支持 zip和rar格式的压 ...

  5. js上传文件带参数,并且,返回给前台文件路径,解析上传的xml文件,存储到数据库中

    ajaxfileupload.js jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId ...

  6. Web.Config文件配置之限制上传文件大小和时间

    在邮件发送系统或者其他一些传送文件的网站中,用户传送文件的大小是有限制的,因为这样不但可以节省服务器的空间,还可以提高传送文件的速度.下面介绍如何在Web.Config文件中配置限制上传文件大小与时间 ...

  7. [html5+java]文件异步读取及上传核心代码

    html5+java 文件异步读取及上传关键代码段 功能: 1.多文件文件拖拽上传,file input 多文件选择 2.html5 File Api 异步FormData,blob上传,图片显示 3 ...

  8. 使用swfupload上传超过30M文件,使用FLASH上传组件

    原文:使用swfupload上传超过30M文件,使用FLASH上传组件 前一段时间会员的上传组件改用FLASH的swfupload来上传,既能很友好的显示上传进度,又能完全满足大文件的上传. 后来服务 ...

  9. PHP之文件的锁定、上传与下载

    小结文件的锁定机制.上传和下载 1.文件锁定 现在都在讲究什么分布式.并发等,实际上文件的操作也是并发的,在网络环境下,多个用户在同一时刻访问页面,对同一服务器上的同一文件进行着读取,如果,这个用户刚 ...

  10. ASP.NET MVC 使用Uploadify实现多文件异步无刷新上传

    软件技术开发,合作请联系QQ:858-048-581 这里我通过使用uploadify组件来实现异步无刷新多文件上传功能. 1.首先下载组件包uploadify,我这里使用的版本是3.1 2.下载后解 ...

随机推荐

  1. Java多线程编程技术方案原理

    一 ,多线程相关的一些概念 1,线程和进程: 线程指的是进程中一个单一顺序的控制流, 进程中可以并发多个线程,每条线程并行执行不同的任务,被认为是一个计算资源的集合.进程不能被任务是一个应用,因为有些 ...

  2. 地址重写了,只是ip 没转发,应该是9999那个才对,rewrite /sbgl/(.*) http://127.0.0.1:9999/$1 permanent;,这样,

    记录想nginx搞路径重写的失败历程. 1.想将从nginx发出的127.0.0.1:80 请求过来的带sbgl的字眼去掉,然后,代理为127.0.0.1:9999, 所以我就百度出这个  这个  r ...

  3. return chain.filter(exchange); 这句啥意思

    答:继续往后执行过滤器,如果不调用这句代码,请求就不会发给控制器了,如果当前执行的过滤器后面还有过滤器,执行那个过滤器,如果没有,就执行控制器. 那我此时想一个请求取消token校验,得在这里加吗? ...

  4. vue-seamless-scroll 组件用法-区域内容滚动效果

    1.滚动效果 2.代码 <div class="page-container" style=""> <vue-seamless-scroll ...

  5. DSL语言思想的应用

    背景 DSL语言的认知 DSL思想的应用 DSL的拓展思考 目标 业务限定 简化逻辑 提高效率 实现 业务提取 业务共性抽离 语法生成 语法实施

  6. BIP去掉弹框中的参照的新增按钮

    viewModel.get("material_class_name").on("afterInitVm", function (arg) {         ...

  7. CAD中相交线怎样打断?CAD打断相交线步骤

    在CAD设计过程中,如果想要打断图纸中相交线该如何操作呢?大家第一个想到的是不是CAD打断命令?没错,CAD打断命令是可以实现的,但是过于麻烦,今天小编来给大家分享一个更简单的方法,那就是浩辰CAD软 ...

  8. css设置背景图(背景图太大导致图片显示不全)

    .bg{background:url('/back.png');filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizi ...

  9. rar 压缩解压

    rar wget https://www.rarlab.com/rar/rarlinux-x64-612.tar.gz # 压缩文件 rar a -r test.rar file # 解压文件 unr ...

  10. 高德地图poi关键字搜索-vue+ant-design

    最近有个需求,需要输入上车点,下车点,然后输入上车点的时候还要在下方显示地图附近的车辆.百度了一波之后,完全莫得头绪,很多代码也都用不了,即便改了之后也不怎么生效.我用的是jeecg-boot.最后静 ...