<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. vc++之stdafx.h

    关于stdafx.h的解释,其实蛮多的,在vs中,既然创建c++工程的时候,默认会给生成main.cpp,并且自动包含了stdafx.h,而且stdafx.h不是c++标准的一部分,那么个人认为,理解 ...

  2. jQuery 概述

    jQuery 概述 版权声明:未经博主授权,内容严禁分享转载! 什么是 JavaScript 类库 JavaScript 类库是指已经被封装好的一系列 JavaScript 函数,能够实现一些特定的功 ...

  3. 09:Linux 中各个文件夹的作用

    参考博客 /  根目录 包含了几乎所的文件目录.相当于中央系统.进入的最简单方法是:cd /. /boot  引导程序,内核等存放的目录 这个目录,包括了在引导过程中所必需的文件.在最开始的启动阶段, ...

  4. SQL、SQL Server、MySQL与Oracle

    SQL (Structured Query Language),结构化查询语言,用来与多种数据库建立联系,根据ANSI(美国国家标准协会)的规定,SQL为RDBMS(关系型数据库)的标准语言. --- ...

  5. 20145336 张子扬 《网络对抗技术》web基础

    20145336张子扬<网络对抗>Exp8 Web基础 实践内容 1.简单的web前端页面(HTML.CSS等) 2.简单的web后台数据处理(PHP) 3.Mysql数据库 4.一个简单 ...

  6. 权限管理,pymysql模块

    权限管理 权限管理重点 MySQL 默认有个root用户,但是这个用户权限太大,一般只在管理数据库时候才用.如果在项目中要连接 MySQL 数据库,则建议新建一个权限较小的用户来连接. 在 MySQL ...

  7. 【命令】Redis常用命令整理

    doc 环境下使用命令:       keys 命令         ?    匹配一个字符         *    匹配任意个(包括0个)字符         []    匹配括号间的任一个字符, ...

  8. System.ConfigurationManager类用于对配置文件的读取

    http://blog.csdn.net/ligenyingsr/article/details/54095986 System.ConfigurationManager类用于对配置文件的读取.其具有 ...

  9. [web开发] - 一些注解的解释

    @WebServlet替代了原本web.xml中配置的url拦截 可以直接在servlet上添加该注解,加入("/hello")类似的路径 但在controller层(Spring ...

  10. org.apache.axis2.AxisFault: java.lang.Error: Unresolved compilation problem:

    原创:转载请注明出处 今天遇到以下一个异常,找了好长时间,就是不知道什么原因, 在网上搜了好多,也没搜到相关的解决方法. 1.异常展示, org.apache.axis2.AxisFault: jav ...