vue-element:文件上传七牛之key和异步的问题
效果图:
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()
},
上传成功:
vue-element:文件上传七牛之key和异步的问题的更多相关文章
- vue + element 文件上传 并将文件转 base64
当时有一个需求 是需要用到上传文件这个功能,并且需要将文件转为 base64 给到后台.网上找的全是啥图片转base64 肯定是因为这类需求比较常见.当时有点懵了.后面一想,都他娘是文件啊.然后就找到 ...
- nodejs+phantomjs+七牛 实现截屏操作并上传七牛存储
近来研究了下phantomjs,只是初涉,还谈不上深入研究,首先介绍下什么是phantomjs. 官网上的介绍是:”PhantomJS is a headless WebKit scriptable ...
- springboot+vue实现文件上传
https://blog.csdn.net/mqingo/article/details/84869841 技术: 后端:springboot 前端框架:vue 数据库:mysql pom.xml: ...
- php base64编码图片上传七牛
上网上找了好几个例子 都是自己写curl上传 感觉七牛这么多年了不应该sdk不提供一个方法 然后试 试 试 显示put 方式 上传上去 就是个字符串 后来换成文件上传方法 putFile 成了 不废话 ...
- vue element-ui 文件上传
<el-upload class="upload-demo" action="" :before-remove="beforeRemove&qu ...
- vue+springboot文件上传
//vue element-ui组件 <el-upload style="position: relative;top: -40px;left: 240px;" ...
- vue element upload上传、清除等
如果项目中可以使用file-list,那我们可以点击file-list删除文件列表: 有时候项目中是不要这个文件列表的,所以在上传成功以后,文件列表一直存在,要重新上传就必须刷新页面,所以我们需要手动 ...
- vue大文件上传控件选哪个好?
需求: 项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在20G内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以20G来进行限制. PC端全平台支持,要求支持Window ...
- vue大文件上传插件选哪个好?
文件夹数据库处理逻辑 public class DbFolder { JSONObject root; public DbFolder() { this.root = new JSONObject() ...
随机推荐
- sizeof、strlen
一.sizeof sizeof(...)是运算符,sizeof操作符的结果类型是size_t.它在头文件里typedef为unsigned int类型.是以字节为单位进行计数的.所以位域成员不 能用s ...
- asp.net MVC 中呈现指定区域下的分部视图
Html.RenderAction() 可以呈现分部视图. asp.net MVC就是有这种好处,可以将多个子视图无缝合成到一个视图上再输出,那么开发的时候,能够进行模块化开发.看上去同属一个页面上的 ...
- Chapter1-data access reloaded:Entity Framework(上)
本章包括以下几个部分: 1.DataSet and classic ADO.NET approach2.Object model approach3.Object/relational mismatc ...
- Codeforces 768 E. Game of Stones 博弈DP
E. Game of Stones Sam has been teaching Jon the Game of Stones to sharpen his mind and help him de ...
- Codeforces 440 D. Berland Federalization 树形DP,记录DP
题目链接:http://codeforces.com/contest/440/problem/D D. Berland Federalization Recently, Berland faces ...
- P1439 排列LCS问题
P1439 排列LCS问题 56通过 220提交 题目提供者yeszy 标签二分动态规划 难度普及+/提高 提交该题 讨论 题解 记录 最新讨论 暂时没有讨论 题目描述 给出1-n的两个排列P1和P2 ...
- su: /bin/bash: Permission denied带来的疑惑
>客户一个oracle突然当机了,由于业务启动,客户下意识的重启了服务器,系统是起来了,准备切换到oracle用户下启动数据库,可以怎么都无法su切换,真是火上浇油呀,描述如下: 在root用户 ...
- jackson实体为NULL或者为空不显示
1.实体上 @JsonInclude(JsonInclude.Include.NON_NULL) 将该注解放在属性上,如果该属性为null则不参与序列化: 如果放在类上边,那对这个类的全部属性起作用 ...
- ThreadLocal工具类的使用(隔离思想)
ThreadLocal不是用来解决共享对象的多线程访问问题的, 通过ThreadLocal的set()方法设置到线程的ThreadLocal.ThreadLocalMap里的是是线程自己要存储的对象, ...
- bzoj1296 [SCOI2009]粉刷匠——背包
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1296 对于不同木板之间,最终统计答案时做一个分组背包即可: 而要进行分组背包,就需要知道每个 ...