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 ...
随机推荐
- vc++之stdafx.h
关于stdafx.h的解释,其实蛮多的,在vs中,既然创建c++工程的时候,默认会给生成main.cpp,并且自动包含了stdafx.h,而且stdafx.h不是c++标准的一部分,那么个人认为,理解 ...
- jQuery 概述
jQuery 概述 版权声明:未经博主授权,内容严禁分享转载! 什么是 JavaScript 类库 JavaScript 类库是指已经被封装好的一系列 JavaScript 函数,能够实现一些特定的功 ...
- 09:Linux 中各个文件夹的作用
参考博客 / 根目录 包含了几乎所的文件目录.相当于中央系统.进入的最简单方法是:cd /. /boot 引导程序,内核等存放的目录 这个目录,包括了在引导过程中所必需的文件.在最开始的启动阶段, ...
- SQL、SQL Server、MySQL与Oracle
SQL (Structured Query Language),结构化查询语言,用来与多种数据库建立联系,根据ANSI(美国国家标准协会)的规定,SQL为RDBMS(关系型数据库)的标准语言. --- ...
- 20145336 张子扬 《网络对抗技术》web基础
20145336张子扬<网络对抗>Exp8 Web基础 实践内容 1.简单的web前端页面(HTML.CSS等) 2.简单的web后台数据处理(PHP) 3.Mysql数据库 4.一个简单 ...
- 权限管理,pymysql模块
权限管理 权限管理重点 MySQL 默认有个root用户,但是这个用户权限太大,一般只在管理数据库时候才用.如果在项目中要连接 MySQL 数据库,则建议新建一个权限较小的用户来连接. 在 MySQL ...
- 【命令】Redis常用命令整理
doc 环境下使用命令: keys 命令 ? 匹配一个字符 * 匹配任意个(包括0个)字符 [] 匹配括号间的任一个字符, ...
- System.ConfigurationManager类用于对配置文件的读取
http://blog.csdn.net/ligenyingsr/article/details/54095986 System.ConfigurationManager类用于对配置文件的读取.其具有 ...
- [web开发] - 一些注解的解释
@WebServlet替代了原本web.xml中配置的url拦截 可以直接在servlet上添加该注解,加入("/hello")类似的路径 但在controller层(Spring ...
- org.apache.axis2.AxisFault: java.lang.Error: Unresolved compilation problem:
原创:转载请注明出处 今天遇到以下一个异常,找了好长时间,就是不知道什么原因, 在网上搜了好多,也没搜到相关的解决方法. 1.异常展示, org.apache.axis2.AxisFault: jav ...