<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. 获取Json字符串中的key和value

    获取Json字符串中的key和value 在web项目中经常会用到json数据(如:struts2处理请求返回json数据给jsp解析),因此,JSONObject对象是必备的,这时就需要引入相关的j ...

  2. mysql hang and srv_error_monitor_thread using 100% cpu(已解决)

    昨天晚上,运维过来说有台生产服务器的mysql cpu一直100%,新的客户端登录不了,但是已经在运行的应用都正常可用. 登录服务器后,top -H看了下,其中一个线程的cpu 一直100%,其他的几 ...

  3. 02: css常用属性

    目录: 1.1 设置样式的七个选择器 1.2 css常见属性浅析 1.3 css布局中常用方法 1.1 设置样式的七个选择器返回顶部 1.其中选择器介绍 1. 直接在标签里的style标签写样式 2. ...

  4. 20145127《java程序设计》第二次实验

    一.实验内容及其步骤 1.要想对某个程序进行单元测试,我们先是在eclipse中建立了一个新的项目,项目的名字是TDDDmeo.并在这个新的项目里右键单击创建一个source floder.并将flo ...

  5. 20145317 网络对抗技术 逆向与Bof基础

    20145317 网络对抗技术 逆向与Bof基础 实践要求 1. 掌握NOP,JNE,JE,JMP,CMP汇编指令的机器码 2. 掌握反汇编与十六进制编程器 3. 能正确修改机器指令改变程序执行流程 ...

  6. E: could not get lock /var/lib/dpkg/lock-frontend - open (11: Resource temporary unavailable) E: Unable to acquire the dpkg frontend lock (/var/lib/dpkg/lock-frontend), is an other process using it

    1. 问题详细提示如下: E: Could not get lock /var/lib/dpkg/lock-frontend - open (11: Resource temporarly unava ...

  7. windows10下使用source insight出现"source insight program editor已停止工作"的问题

    一.背景 1.1 OS 版本 windows 10 1.2 source insight版本 source insight 3.50.0034 二.解决方案 删除"我的文档"下面的source ins ...

  8. B-树 B+树 B*树

    区分B树,B-树 有的文章说二叉查找树(Binary Search Tree,BST)就是B树,这个我总结来说是不对的 B树和B-树是同一种树,只不过英语中B-tree被中国人翻译成了B-树,让人以为 ...

  9. JavaScript紧凑学习

    JavaScript紧凑学习 windows本地,调用命令行: win键+R 键入cmd , (cmd是Command 命令行 简称) 目录是C盘下的 C:\Users\Administrator&g ...

  10. LINUX设备驱动模型之class

    转自 https://blog.csdn.net/qq_20678703/article/details/52754661 1.LINUX设备驱动模型中的bus.device.driver,.其中bu ...