element upload上传前对文件专门bs64上传
<!-- 文件上传 -->
<template>
<section class="file-upload">
<p class="title">提案信息</p>
<el-upload
class="upload-demo"
ref="fileUpload"
accept=".xls,.xlsx"
:class="{'pointer-events' : fileShow}"
:action="action"
:data="excelPath"
:on-change="fileData"
:on-success="fileSuccess"
:show-file-list="fileShow"
:limit="1"
:file-list="fileList"
:before-remove="beforeRemove"
:disabled="disabled"
:auto-upload="false"
>
<el-button :type=" disabled ? 'info' : 'primary'" >导入发起提案</el-button> </el-upload> </section>
</template> <script> export default {
data() {
return {
action: process.env.VUE_APP_BASE_API + process.env.VUE_APP_REQURL +"/fileImport/getFileInfo",
excelPath: {
"excelPath": ""
}
};
},
computed:{
fileShow : {
get : function () {
return this.fileList.length > 0 ? true : false
},
set : function (newValue) { }
},
disabled : {
get : function () {
return this.$route.query.id ? true : false
},
set : function (newValue) { }
},
},
props:{
fileList: Array,Object,
}, methods: { beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${ file.name }?`).then(()=>{
this.$emit('dataInit')
});
},
fileSuccess (response, file, fileList) {
this.getData(response.data)
this.fileShow = true
this.disabled = true
this.$emit('addFile',{name: file.name, url: ''})
}, getData(val){
this.$emit('getData',val)
},
// 获取本地路径地址
fileData(file){
let reader = new FileReader()
reader.readAsDataURL(file.raw);// 这里也可以直接写参数event.raw
reader.onload=()=>{
this.excelPath.excelPath = reader.result
this.$refs.fileUpload.submit(); }
}, }
}
</script>
element upload上传前对文件专门bs64上传的更多相关文章
- .NET 客户端上传本地excel文件到服务器上,并在客户端显示
// 上传按钮 protected void btnUp_Click(object sender, EventArgs e) { bool b = Upload(fuExcel); // 上传exce ...
- Uploadify 上传后的文件删除,上传队列无法更新问题
1. 定义一个上传限制数量 var uploadLimit = 3; 2. 点击页面的删除图片成功后,将uploadLimit++操作 3. 通过uploadify的settings方式重置上传限制数 ...
- SpringMVC结合ajaxfileupload.js实现文件无刷新上传
直接看代码吧,注释都在里面 首先是web.xml <?xml version="1.0" encoding="UTF-8"?> <web-ap ...
- WEB版一次选择多个文件进行批量上传(WebUploader)的解决方案
本人在2010年时使用swfupload为核心进行文件的批量上传的解决方案.见文章:WEB版一次选择多个文件进行批量上传(swfupload)的解决方案. 本人在2013年时使用plupload为核心 ...
- JS开发——文件夹的上传和下载
文件夹上传:从前端到后端 文件上传是 Web 开发肯定会碰到的问题,而文件夹上传则更加难缠.网上关于文件夹上传的资料多集中在前端,缺少对于后端的关注,然后讲某个后端框架文件上传的文章又不会涉及文件夹. ...
- B/S开发——文件夹的上传和下载
本人在2010年时使用swfupload为核心进行文件的批量上传的解决方案.见文章:WEB版一次选择多个文件进行批量上传(swfupload)的解决方案. 本人在2013年时使用plupload为核心 ...
- 前端js webuploader上传(导入)excel文件
项目开发中用到导入(上传)Excel文件 我使用的是百度的webuploader: 1:下载:http://fex.baidu.com/webuploader/(官方下载/示例) 2:使用Web Up ...
- 将文件夹上传到FTP服务器,遍历上传,,,文件夹不能直接上传到FTP服务器上。。。
<? $ftp_ip = "FTP"; $ftp_user = "user"; $ftp_pwd = "password"; $con ...
- ng-file-upload(在单文件选择,并且通过点击“上传”按钮上传文件的情况下,如何在真正选择文件之前保留上一文件信息?)
文章前面研究ng-file-upload可能涉及指令: You can use ng-model or ngf-change instead of specifying function for ng ...
随机推荐
- ES6中set的用法回顾
ES6中的set类似一个数组,但是其中的值都是唯一的,Set本身是一个构造函数,用来生成 Set 数据结构. set函数可以接受一个数组作为参数,用来初始化: const set = new Set( ...
- HTML5-新增表单元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Netty之SubPage级别的内存分配
SubPage 级别的内存分配: 通过之前的学习我们知道, 如果我们分配一个缓冲区大小远小于page, 则直接在一个page 上进行分配则会造成内存浪费, 所以需要将page 继续进行切分成多个子块进 ...
- Communications link failure mysql自动停止 连接拒绝 mysqld dead but sub。。。
服务器环境中 JAVA 连接数据库 Communications link failure, Contection refused 网上很多这种情况,解决基本上是将127.0.0.1换成localho ...
- fastJson + lombok + 属性名命名 踩坑点
JavaBean属性名要求:前两个字母要么都大写,要么都小写 package com.jdyh.worker.project.controller; import com.alibaba.fastjs ...
- [HDU 5293]Tree chain problem(树形dp+树链剖分)
[HDU 5293]Tree chain problem(树形dp+树链剖分) 题面 在一棵树中,给出若干条链和链的权值,求选取不相交的链使得权值和最大. 分析 考虑树形dp,dp[x]表示以x为子树 ...
- [Codeforces 280D]k-Maximum Subsequence Sum(线段树)
[Codeforces 280D]k-Maximum Subsequence Sum(线段树) 题面 给出一个序列,序列里面的数有正有负,有两种操作 1.单点修改 2.区间查询,在区间中选出至多k个不 ...
- [暑假集训Day3T3]平板涂色
同样是搜索经典题. 优化并不多,只需在当前步数已经大于目前答案时剪枝就可以了. 此题重点在于如何判断第k个矩形能不能选. 设矩形i的左上坐标为i(squ[i].upx,squ[i].upy),右下角坐 ...
- 对于nginx配置文件中的fastcgi_param相关参数的理解
今天在ubuntu中搭建LNMP的时候,遇到了一个问题 在浏览器中访问.php文件的时候,nginx不能正常解析,页面只是空白,后来百度了一下,发现了问题 在nginx的配置文件nginx.conf中 ...
- Linux磁盘分区实例演示
一直觉得Linux的分区操作很高大上,之前在物理机上装的Linux,所以不敢随便乱来,今天重回Windows,下面利用Windows上的Linux虚拟机实际操作一次磁盘分区,要求:1G的硬盘分成2个2 ...