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

  1. vue 上传文件 和 下载文件

    Vue上传文件,不必使用什么element 的uplaod, 也不用什么npm上找的个人写的包,就用原生的Vue加axios就行了, 废话不多说,直接上代码:html: <input type= ...

  2. vue 上传文件 和 下载文件 面试的时候被问到过

    Vue上传文件,不必使用什么element 的uplaod, 也不用什么npm上找的个人写的包,就用原生的Vue加axios就行了, 废话不多说,直接上代码:html: <input type= ...

  3. axios+Vue上传文件显示进度

    一,前言 最近在用Vue,然后上传文件时需要显示进度,于是网上搜了一下,经过自己实测终于也弄明白了 二,效果 三,代码 HTML代码 <div id="app"> &l ...

  4. vue+上传文件夹

    在做项目开发的时候,上传东西无论文件也好,还是文件夹都需要用到 <input type="file" id="filepicker" name=" ...

  5. vue 上传文件 并以表格形式显示在页面上

    先上代码 <label for="file" class="btn">多文件上传</label> <input type=&quo ...

  6. Vue上传文件:ElementUI中的upload实现

    一.上传文件实现 两种实现方式: 1.直接action <el-upload  .利用before-upload属性 此种方式有个弊端,就是action是必选的参数,那么action如果和pos ...

  7. ant design for vue 上传文件

    1.使用customRequest customRequest 通过覆盖默认的上传行为,可以自定义自己的上传实现 Function 定义customRequest,之前定义action行为会被覆盖,可 ...

  8. 阿里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 ...

  9. vue 上传进度显示

    参考资料: https://ask.csdn.net/questions/767017 https://www.cnblogs.com/best-fyx/p/11363506.html 我使用的是el ...

随机推荐

  1. c++中对应java ShutdownHook的退出处理器

    最近学习cpp(至于为什么,可参考http://www.cnblogs.com/zhjh256/p/6321972.html),c++标准库第二版5.8.2节的时候,发现c++有一个对应java Sh ...

  2. zabbix-server新增zabbix-agent

    zabbix监控系统搭建好了之后,就需要为各种角色host加入进来,现在新增一台zabbix-agent: 1.在172.16.23.128上安装zabbix-agent,zabbix-server: ...

  3. 20145101《Java程序设计》第6周学习总结

    20145101<Java程序设计>第6周学习总结 教材学习内容总结 第十章输入和输出 java.io.InputStream.java.io.OutputStream实例分别作为输入.输 ...

  4. 微信小程序——3、逻辑js文件

    逻辑层js文件 微信小程序前端进行了层次划分,分为逻辑层和视图层.逻辑层实现对数据的加工和处理.与HTML页面相似,逻辑层使用JavaScript编写.逻辑层将数据处理后发送至视图层,同时接受视图层的 ...

  5. 20165310_获奖感想与Java阶段性学习总结

    获奖感想与Java阶段性学习总结 一.Learning By Doing ​ 在此之前,其实我并没有想到能够成为小黄杉的第一批成员之一,喜悦之余,也感受到了许多的压力.小黄杉一方面代表了老师对于我这一 ...

  6. hdu Naive Operations 线段树

    题目大意 题目链接Naive Operations 题目大意: 区间加1(在a数组中) 区间求ai/bi的和 ai初值全部为0,bi给出,且为n的排列,多组数据(<=5),n,q<=1e5 ...

  7. 使用 PYTHON 为 PIP 搭建 HTTP 代理

    在一台没有 Root 权限的机器上,部署使用 Python 编写的服务,似乎只有 virtualenv 一条路可以选了. 当然我见过一些同事会在自己的家目录编译一个,然后设置一下 $PATH ,但是从 ...

  8. javascript面向对象的一些写法

    因为有闭包,能返回函数,所以针对于面向对象的封装,继承,多态三个特性实现,很舒服. 代码如下: <!DOCTYPE html> <html> <head> < ...

  9. 【Python】【 接口自动化测试】【一】环境搭建

    1. 环境配置 我电脑Windows7 64位  +  Python2.7  + Oracle客户端 10.2 + cx_Oracle 10g Oracle客户端下载(为此我还申请个Oracle账号) ...

  10. 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 ...