vue上传文件
<div>
<input type="file" class="file" name="file" @change="uploadBefore">
</div>
export default {
methods:{
//选择文件
uploadBefore(){
var formData = new FormData() // 声明一个FormData对象
this.formData = new window.FormData() // vue 中使用 window.FormData(),否则会报 'FormData isn't definded'
this.formData.append('file', document.querySelector('input[type=file]').files[0]) // 'userfile' 这个名字要和后台获取文件的名字一样;
let file = document.querySelector('input[type=file]').files[0]
console.log(this.fileName)
let fileName = file.name.substring(file.name.lastIndexOf(".")+1,file.name.length)
const fileType = fileName == 'xls'||fileName == 'xlsx'||fileName == 'ppt'||fileName == 'pptx'||fileName == 'doc'||fileName == 'docx'||fileName == 'txt'||fileName == 'pdf'||fileName == 'jpg'||fileName == 'gif'||fileName == 'jpeg'||fileName == 'png'||fileName == 'bmp'||fileName == 'mp3'||fileName == 'mp4';
// console.log(file)
// console.log(fileName)
// console.log(fileType)
if (!fileType) {
this.$message.error('上传文件格式不正确,请检查');
this.numberValidateForm.fileName = ""
}else{ this.numberValidateForm.fileName = file.name
}
},
// 保存,上传文件
submitForm() {
this.saveLoading = true
this.$http({
url: this.$store.state.domian+'/bbt-admin/courseware/upload/'+dynamicppt,
data: this.formData,
method: 'post',
headers: {
'Content-Type': 'multipart/form-data',
}
}).then((res => {
if (res.data.statusCode == 0) { this.$message({message:'操作成功!',type: 'success'})
this.dialogTableVisible = false
this.getFileList(1); }
this.saveLoading = false
console.log(res)
})
) });
},
} }
vue上传文件的更多相关文章
- vue 上传文件 和 下载文件
Vue上传文件,不必使用什么element 的uplaod, 也不用什么npm上找的个人写的包,就用原生的Vue加axios就行了, 废话不多说,直接上代码:html: <input type= ...
- vue 上传文件 和 下载文件 面试的时候被问到过
Vue上传文件,不必使用什么element 的uplaod, 也不用什么npm上找的个人写的包,就用原生的Vue加axios就行了, 废话不多说,直接上代码:html: <input type= ...
- axios+Vue上传文件显示进度
一,前言 最近在用Vue,然后上传文件时需要显示进度,于是网上搜了一下,经过自己实测终于也弄明白了 二,效果 三,代码 HTML代码 <div id="app"> &l ...
- vue+上传文件夹
在做项目开发的时候,上传东西无论文件也好,还是文件夹都需要用到 <input type="file" id="filepicker" name=" ...
- vue 上传文件 并以表格形式显示在页面上
先上代码 <label for="file" class="btn">多文件上传</label> <input type=&quo ...
- Vue上传文件:ElementUI中的upload实现
一.上传文件实现 两种实现方式: 1.直接action <el-upload .利用before-upload属性 此种方式有个弊端,就是action是必选的参数,那么action如果和pos ...
- ant design for vue 上传文件
1.使用customRequest customRequest 通过覆盖默认的上传行为,可以自定义自己的上传实现 Function 定义customRequest,之前定义action行为会被覆盖,可 ...
- 阿里OSS Vue上传文件提示The OSS Access Key Id you provided does not exist in our records.解决方法
vue项目 1.安装OSS的Node SDK npm install ali-oss --save 2.参考官方提示https://help.aliyun.com/document_detail/11 ...
- vue 上传进度显示
参考资料: https://ask.csdn.net/questions/767017 https://www.cnblogs.com/best-fyx/p/11363506.html 我使用的是el ...
随机推荐
- c++中对应java ShutdownHook的退出处理器
最近学习cpp(至于为什么,可参考http://www.cnblogs.com/zhjh256/p/6321972.html),c++标准库第二版5.8.2节的时候,发现c++有一个对应java Sh ...
- zabbix-server新增zabbix-agent
zabbix监控系统搭建好了之后,就需要为各种角色host加入进来,现在新增一台zabbix-agent: 1.在172.16.23.128上安装zabbix-agent,zabbix-server: ...
- 20145101《Java程序设计》第6周学习总结
20145101<Java程序设计>第6周学习总结 教材学习内容总结 第十章输入和输出 java.io.InputStream.java.io.OutputStream实例分别作为输入.输 ...
- 微信小程序——3、逻辑js文件
逻辑层js文件 微信小程序前端进行了层次划分,分为逻辑层和视图层.逻辑层实现对数据的加工和处理.与HTML页面相似,逻辑层使用JavaScript编写.逻辑层将数据处理后发送至视图层,同时接受视图层的 ...
- 20165310_获奖感想与Java阶段性学习总结
获奖感想与Java阶段性学习总结 一.Learning By Doing 在此之前,其实我并没有想到能够成为小黄杉的第一批成员之一,喜悦之余,也感受到了许多的压力.小黄杉一方面代表了老师对于我这一 ...
- hdu Naive Operations 线段树
题目大意 题目链接Naive Operations 题目大意: 区间加1(在a数组中) 区间求ai/bi的和 ai初值全部为0,bi给出,且为n的排列,多组数据(<=5),n,q<=1e5 ...
- 使用 PYTHON 为 PIP 搭建 HTTP 代理
在一台没有 Root 权限的机器上,部署使用 Python 编写的服务,似乎只有 virtualenv 一条路可以选了. 当然我见过一些同事会在自己的家目录编译一个,然后设置一下 $PATH ,但是从 ...
- javascript面向对象的一些写法
因为有闭包,能返回函数,所以针对于面向对象的封装,继承,多态三个特性实现,很舒服. 代码如下: <!DOCTYPE html> <html> <head> < ...
- 【Python】【 接口自动化测试】【一】环境搭建
1. 环境配置 我电脑Windows7 64位 + Python2.7 + Oracle客户端 10.2 + cx_Oracle 10g Oracle客户端下载(为此我还申请个Oracle账号) ...
- hdu 5381 The sum of gcd 莫队+预处理
The sum of gcd Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) P ...