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 ...
随机推荐
- TensorFlow入门(四) name / variable_scope 的使
name/variable_scope 的作用 欢迎转载,但请务必注明原文出处及作者信息. @author: huangyongye @creat_date: 2017-03-08 refer to: ...
- linux学习笔记《一.烧写篇_android》
一.菜鸟入门.烧写篇 (1).A8板子烧写程序 (NANDFlash烧写) ①烧写软件: 安装原件 安装后: 应用软件图标 ② 我们首先选中English/中文,切换到中文,然后关掉重启(也可以用英文 ...
- C# 将 Stream 写入文件
public void StreamToFile(Stream stream,string fileName) { // 把 Stream 转换成 byte[] byte[] bytes = new ...
- Python3基础 dict items 以元组的形式打印出字典的每一个项
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- Bootloader之uBoot简介
本文转载自:http://blog.ednchina.com/hhuwxf/1915416/message.aspx 一.Bootloader的引入 从前面的硬件实验可以知道,系统上电之后,需要一段程 ...
- BZOJ5188: [Usaco2018 Jan]MooTube 并查集+离线处理
BZOJ又不给题面... Luogu的翻译看不下去... 题意简述 有一个$n$个节点的树,边有权值,定义两个节点之间的距离为两点之间的路径上的最小边权 给你$Q$个询问,问你与点$v$的距离超过$k ...
- [BZOJ2208][Jsoi2010]连通数 暴力枚举
Description Input 输入数据第一行是图顶点的数量,一个正整数N. 接下来N行,每行N个字符.第i行第j列的1表示顶点i到j有边,0则表示无边. Output 输出一行一个整数,表示该图 ...
- 从零开始的四轴飞行器-开篇flag
在这里立下flag,我要理解学会四轴飞行器的控制方法.
- 初探 Yii2 的测试模式 index-test.php
有没有发现高级版每个应用的 web 目录下有两个入口文件,一个index.php 一个 index-test.php通过init.bat可以切换到调试模式和产品模式,这两个模式相信同学们都很熟悉了,那 ...
- Mysql-SqlServer区别
/* sql规范 所有关键字大写 表面跟字段跟数据库对应 一条sql语句结束必须跟;号 */ /*关键字处理*/ --sqlserver SELECT * FROM [Date]; --mysql S ...