<!-- 文件上传 -->
<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上传的更多相关文章

  1. .NET 客户端上传本地excel文件到服务器上,并在客户端显示

    // 上传按钮 protected void btnUp_Click(object sender, EventArgs e) { bool b = Upload(fuExcel); // 上传exce ...

  2. Uploadify 上传后的文件删除,上传队列无法更新问题

    1. 定义一个上传限制数量 var uploadLimit = 3; 2. 点击页面的删除图片成功后,将uploadLimit++操作 3. 通过uploadify的settings方式重置上传限制数 ...

  3. SpringMVC结合ajaxfileupload.js实现文件无刷新上传

    直接看代码吧,注释都在里面 首先是web.xml <?xml version="1.0" encoding="UTF-8"?> <web-ap ...

  4. WEB版一次选择多个文件进行批量上传(WebUploader)的解决方案

    本人在2010年时使用swfupload为核心进行文件的批量上传的解决方案.见文章:WEB版一次选择多个文件进行批量上传(swfupload)的解决方案. 本人在2013年时使用plupload为核心 ...

  5. JS开发——文件夹的上传和下载

    文件夹上传:从前端到后端 文件上传是 Web 开发肯定会碰到的问题,而文件夹上传则更加难缠.网上关于文件夹上传的资料多集中在前端,缺少对于后端的关注,然后讲某个后端框架文件上传的文章又不会涉及文件夹. ...

  6. B/S开发——文件夹的上传和下载

    本人在2010年时使用swfupload为核心进行文件的批量上传的解决方案.见文章:WEB版一次选择多个文件进行批量上传(swfupload)的解决方案. 本人在2013年时使用plupload为核心 ...

  7. 前端js webuploader上传(导入)excel文件

    项目开发中用到导入(上传)Excel文件 我使用的是百度的webuploader: 1:下载:http://fex.baidu.com/webuploader/(官方下载/示例) 2:使用Web Up ...

  8. 将文件夹上传到FTP服务器,遍历上传,,,文件夹不能直接上传到FTP服务器上。。。

    <? $ftp_ip = "FTP"; $ftp_user = "user"; $ftp_pwd = "password"; $con ...

  9. ng-file-upload(在单文件选择,并且通过点击“上传”按钮上传文件的情况下,如何在真正选择文件之前保留上一文件信息?)

    文章前面研究ng-file-upload可能涉及指令: You can use ng-model or ngf-change instead of specifying function for ng ...

随机推荐

  1. Flannel - 配置

    原文地址 flannel 从 ETCD 中读取配置. 默认情况下,flannel 从 /coreos.com/network/config 中读取配置,可以使用 --etcd-prefix 覆盖. 通 ...

  2. java c 标签的使用

    头部需要引入: <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 需要 ...

  3. Python-位操作 ( &,|,~,^,<<,>>

    用于提高运算速度,规避算术运算符 在位操作运算中,不应该试图考虑先得到一个数的二进制码 ,而是应该将这个数看作是一个二进制码,二进制补码与整数之间是一一对应的. 诚然Python中有内置函数bin将一 ...

  4. Python笔记(二十一)_内置函数、内置方法

    内置函数 issubclass(class1,class2) 判断class1类是否为class2类的子类,返回True和False 注意1:类会被认为是自身的子类 >>>issub ...

  5. 模拟赛T5 : domino ——深搜+剪枝+位运算优化

    这道题涉及的知识点有点多... 所以还是比较有意思的. domino 描述 迈克生日那天收到一张 N*N 的表格(1 ≤ N ≤ 2000),每个格子里有一个非 负整数(整数范围 0~1000),迈克 ...

  6. Win10.设置(放大)

    1.ZC:我从感觉,我在Win10 里面截图 貌似被放大了,尤其是 在往cnblogs里面贴图的时候  比较明显,于是 度娘“Win10 自动放大”,找到如下帖子,里面有 2种设置方式: win10系 ...

  7. 移动端Web页面适配方案

    概念理解 viewport视口 visual viewport 可见视口,设备屏幕的宽度  windw.innerWidth/Height layout viewport 布局视口,DOM宽度 doc ...

  8. 【洛谷新手村】简单字符串 p1055 ISBN号码

    p1055 ISBN号码[传送门] 算法标签什么的: 思路:直接以字符串的形式读入这一串数字,然后for循环对字符串进行处理,字符串中的数字存进数组中(如果是X,存为10):然后再根据要求判断是否是正 ...

  9. redis 哨兵配置文件解读sentinel.conf

    # Example sentinel.conf # port <sentinel-port>port 8001 # 守护进程模式daemonize yes # 指明日志文件名logfile ...

  10. POI之Excel文档增删改查

    需要引用apache第三方lib库poi 支持xls.xlsx格式excel读写操作 package com.hua.excel; import java.io.File;import java.io ...