1. <el-form-item label="附件" prop="attachment">
  2. <el-upload
  3. :multiple="false"
  4. :limit="1"
  5. :on-exceed="handleExceed"
  6. :http-request="uploadFiles"
  7. :on-remove="handleRemoveFj"
  8. action=" "
  9. >
  10. <el-button slot="trigger" size="small" type="primary" >选择文件</el-button>
  11. <el-button v-show="formData.attachment != null" > <a :href="'http:/localhost:8080/file'+formData.attachment">查看文件</a></el-button>
  12. </el-upload>
  13. </el-form-item>
  1. //图片上传数量校验
  2. handleExceed(files, fileList) {
  3. this.$message.warning(`当前限制选择 1 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);
  4. },
  5. //取消上传文件
  6. handleRemoveFj(file,fileList){
  7. this.formData.fileContent = null;
  8. },
  9.  
  10. //文件上传
  11. uploadFiles(data) {
  12. // this.formData.fileUpdate=1; //更新状态 改为已更新
  13. this.formData.fileName = data.file.name; //文件名
  14. this.formData.fileType = "updateNoticeFile";
  15. this.getBase64(data.file).then(resBase64 => {
  16. this.formData.fileContent = resBase64.split(',')[1]
  17. console.info(this.formData.fileContent)
  18. console.info(this.formData.fileContent.length)
  19.  
  20. })
  21. },
  22.  
  23. //文件转base64
  24. getBase64(file) {
  25. return new Promise((resolve, reject) => {
  26. let reader = new FileReader();
  27. let fileResult = "";
  28. reader.readAsDataURL(file);      //开始转
  29. reader.onload = function() {
  30. fileResult = reader.result;
  31. };      //转 失败
  32. reader.onerror = function(error) {
  33. reject(error);
  34. };      //转 结束 咱就 resolve 出去
  35. reader.onloadend = function() {
  36. resolve(fileResult);
  37. };
  38. });
  39. },

前端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. 浅析sleep()方法与wait()方法

    为什么 wait() 方法不定义在 Thread 中?   wait() 是让获得对象锁的线程实现等待,会自动释放当前线程占有的对象锁.每个对象(Object)都拥有对象锁,既然要释放当前线程占有的对 ...

  2. Java pom阿里云插件

    <pluginRepositories> <pluginRepository> <id>alimaven spring plugin</id> < ...

  3. IDEA报错Error running ‘Application‘: Command line is too long解决方案

    IDEA报错Error running 'Application': Command line is too long.Shorten command line for Application or ...

  4. ubuntu18.04 20.04 22.04 环境下的QGIS安装

    Linux下的QGIS安装 截至到2022年8月份,最新的qgis版本是 QGIS (3.26.x Buenos Aires) 参考网址:https://qgis.org/en/site/foruse ...

  5. 提取可执行文件中的调试信息 objcopy --only-keep-debug app app.debug

    https://blog.csdn.net/CaspianSea/article/details/17269977 set-debug-directory show-debug-directory i ...

  6. C# Winform 多线程更新界面UI控件,解决界面卡顿问题(转)

    前言 多线程刷新界面主要用到多线程,委托,线程安全.事件等一系列高难度的C#操作. 1.使用timer控件对要刷新的控件进行定时刷新 对刷新频率要求不高的时候,可以使用该方法. 2.刷新UI控件 在开 ...

  7. HTML 到 CSS,乃至进阶的 XML、SQL、JS、PHP 和 ASP.NET

    https://www.runoob.com/tags/html-reference.html 在线版,从基础的 HTML 到 CSS,乃至进阶的 XML.SQL.JS.PHP 和 ASP.NET. ...

  8. 裁员潮下,我月薪3W依旧坚挺

    近几年来产品经理一直是求职市场中的香饽饽: 年薪20w起.没有专业限制.职业天花板高,甚至行业中一直流传着一句话:产品经理是CEO的学前班. 在各种光环的加持下,不少应届生或有转行打算的职场人都将目光 ...

  9. 微信公众号 H5授权登录

    首先微信公众号 必须是服务号,订阅号没有 "网页授权获取用户基本信息" 没有这个权限.服务号也必须认证后才有这个权限

  10. Jmeter(三十九) - 从入门到精通进阶篇 - Jmeter配置文件的刨根问底 - 上篇(详解教程)

    ------------------------------------------------------------------- 转载自:北京-宏哥 https://www.cnblogs.co ...