效果图:

html 代码:

      <el-form-item label="Excel文件" :label-width="formLabelWidth" prop="excelurl">
<el-upload class="avatar-uploader"
ref="upload"
action="//up.qbox.me/"
:auto-upload="false"
:show-file-list="false"
:on-success="handleFileSuccess"
:on-error="handleFileError"
:on-change="handleChange"
:before-upload="beforeFileUpload"
:data="uploadFile">
<el-button slot="trigger" size="small" type="primary" class="file-select-btn">选择文件</el-button>
<el-button class="upload-file-btn" size="small" type="primary" :disabled="isSuccessUpload" @click="uploadAction">上传</el-button>
</el-upload>
<el-input type="text" v-model="form.excelurl" class="upload-file-input" v-if="fileState" disabled></el-input>
<el-button size="small" type="primary" class="change-file-btn" v-if="btnState" @click="fileState=false;btnState=false">修改</el-button>
</el-form-item>
其中: auto-upload="false"   为选择文件后不立即上传  on-change="handleChange"  为状态改变立即触发

Js代码:

     beforeFileUpload(file) {
let filetype = file.name.slice(file.name.lastIndexOf('.'),file.name.length)
if (filetype === '.xls' || filetype === '.xlsx') {
// return true
} else {
this.$message.error('请上传EXCEL格式文件')
return false
}
const isLt2M = file.size / 1024 / 1024 < 2
if (!isLt2M) {
this.$message.error('上传文件大小不能超过 2MB!')
return false;
}
},
handleChange(file){
if(!this.fileState){
this.$http.post(GET_UPLOAD_TOKEN, {}).then(res => {
if (res.data.ret === 0) {
this.uploadFile = {key:file.name,token : res.data.data.upToken}
this.form.excelurl = file.name
this.fileState = true
}else{
return false
}
})
}
},
uploadAction(){
this.$refs.upload.submit()
},

上传成功:

注:
    在上传七牛时通过给key赋值,上传了原本的文件名,不通过七牛随机产生
     通过on-change函数在选择文件后,请求到token, 然后再上传文件 

vue-element:文件上传七牛之key和异步的问题的更多相关文章

  1. vue + element 文件上传 并将文件转 base64

    当时有一个需求 是需要用到上传文件这个功能,并且需要将文件转为 base64 给到后台.网上找的全是啥图片转base64 肯定是因为这类需求比较常见.当时有点懵了.后面一想,都他娘是文件啊.然后就找到 ...

  2. nodejs+phantomjs+七牛 实现截屏操作并上传七牛存储

    近来研究了下phantomjs,只是初涉,还谈不上深入研究,首先介绍下什么是phantomjs. 官网上的介绍是:”PhantomJS is a headless WebKit scriptable ...

  3. springboot+vue实现文件上传

    https://blog.csdn.net/mqingo/article/details/84869841 技术: 后端:springboot 前端框架:vue 数据库:mysql pom.xml: ...

  4. php base64编码图片上传七牛

    上网上找了好几个例子 都是自己写curl上传 感觉七牛这么多年了不应该sdk不提供一个方法 然后试 试 试 显示put 方式 上传上去 就是个字符串 后来换成文件上传方法 putFile 成了 不废话 ...

  5. vue element-ui 文件上传

    <el-upload class="upload-demo" action="" :before-remove="beforeRemove&qu ...

  6. vue+springboot文件上传

    //vue element-ui组件 <el-upload style="position: relative;top: -40px;left: 240px;"        ...

  7. vue element upload上传、清除等

    如果项目中可以使用file-list,那我们可以点击file-list删除文件列表: 有时候项目中是不要这个文件列表的,所以在上传成功以后,文件列表一直存在,要重新上传就必须刷新页面,所以我们需要手动 ...

  8. vue大文件上传控件选哪个好?

    需求: 项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在20G内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以20G来进行限制. PC端全平台支持,要求支持Window ...

  9. vue大文件上传插件选哪个好?

    文件夹数据库处理逻辑 public class DbFolder { JSONObject root; public DbFolder() { this.root = new JSONObject() ...

随机推荐

  1. 谁是性能杀手?Kafka多Topic下启用SSL时延增大问题分析

    问题背景 项目中将Kafka接口进行RESTful封装,在使用RESTful接口进行性能测试时,发现Topic数增多后,开启SSL与非SSL进行测试,发现开启SSL后性能下降得厉害.例如600个Top ...

  2. Android 怎样在java/native层改动一个文件的权限(mode)与用户(owner)?

    前言          欢迎大家我分享和推荐好用的代码段~~ 声明          欢迎转载.但请保留文章原始出处:          CSDN:http://www.csdn.net        ...

  3. 【ios系列】-数据储存

    第一:plist属性列表 适用对象:仅仅是Foundation框架自带的一些类比如:NString\NSarry\NSDictionary\NSset\NSnumber\NSdata 使用: 1:调用 ...

  4. 【iOS开发】-NSString的扩展使用

    第一:基本数据类型与字符串转换 //基本数据类型(int float,double char) 1)基本数据类型->NSString //1.int类型换换成字符串 int a = 88; NS ...

  5. Android之——经常使用手机号码功能

    转载请注明出处:http://blog.csdn.net/l1028386804/article/details/47374415 有些Android手机中会带有一些经常使用号码的功能,比方订餐电话. ...

  6. [办公应用]如何在WORD中让英文网址可以在字符中间换行

    有时候我们写文章,存在中英文混合录入的情况.一般情况下,office 2003的word软件中,会自作聪明的避免单词断行显示,也就是说它会默认尽量把一个单词显示在某一行内,从而避免单词被分开.但有时候 ...

  7. YTU 2579: 填空题----删除指定字符

    2579: 填空题----删除指定字符 时间限制: 1 Sec  内存限制: 128 MB 提交: 164  解决: 61 题目描述 小明想要做个小程序,能够删除字符串中特定的字符. 例如:想要在下面 ...

  8. YTU 2953: A代码填充--学画画

    2953: A代码填充--学画画 时间限制: 1 Sec  内存限制: 128 MB 提交: 62  解决: 52 题目描述 最近小平迷上了画画,经过琨姐的指导,他学会了RGB色彩的混合方法.对于两种 ...

  9. bzoj1046 [HAOI2007]上升序列——LIS

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1046 倒序求最长下降子序列,则得到了每个点开始的最长上升子序列: 然后贪心输出即可. 代码如 ...

  10. 腾讯API

    相关文档: API列表  腾讯开放平台联调工具集  公共返回码说明 SDK下载