vue实现文件上传
<!-- multiple多个文件上传 accept文件类型-->
<input
type="file"
@change="addFile"
ref="inputer"
accept="application/vnd.ms-powerpoint, application/vnd.openxmlformats-officedocument.presentationml.presentation, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/pdf"
>
<p>支持文件格式:.ppt .pptx .doc .docx .pdf ,单个文件不能超过20M.</p>
--------------------------------------------------------------------
js
export default {
data() {
return {
formData: new FormData(),
file: {}, //文件数据
}
}
} methods: {
//上传文件
addFile: function() {
var _this = this;
let inputDOM = this.$refs.inputer;
// let oldLen = this.filLen;
this.file = inputDOM.files[0];
let len = this.file.length;
let size = Math.floor(this.file.size / 1024);
if (size > 20 * 1024 * 1024) {
alert("请选择20M以内的图片!");
return false;
}
this.formData.append("file", this.file);
this.$http({
method: "post",
url: _this.HOST + api.upload,
data: this.formData,
headers: {
"Content-Type": "multipart/form-data"
}
})
.then(function(res) {
})
.catch(function(err) {
console.log("新建分享", err);
}); },
}
多个文件情况与单个文件其实一致的
vue实现文件上传的更多相关文章
- springboot+vue实现文件上传
https://blog.csdn.net/mqingo/article/details/84869841 技术: 后端:springboot 前端框架:vue 数据库:mysql pom.xml: ...
- vue+springboot文件上传
//vue element-ui组件 <el-upload style="position: relative;top: -40px;left: 240px;" ...
- vue element-ui 文件上传
<el-upload class="upload-demo" action="" :before-remove="beforeRemove&qu ...
- vue + element 文件上传 并将文件转 base64
当时有一个需求 是需要用到上传文件这个功能,并且需要将文件转为 base64 给到后台.网上找的全是啥图片转base64 肯定是因为这类需求比较常见.当时有点懵了.后面一想,都他娘是文件啊.然后就找到 ...
- vue大文件上传控件选哪个好?
需求: 项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在20G内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以20G来进行限制. PC端全平台支持,要求支持Window ...
- vue大文件上传插件选哪个好?
文件夹数据库处理逻辑 public class DbFolder { JSONObject root; public DbFolder() { this.root = new JSONObject() ...
- vue大文件上传组件选哪个好?
需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制. 第一步: 前端修改 由于项目使用的是 ...
- vue+大文件上传控件
总结一下大文件分片上传和断点续传的问题.因为文件过大(比如1G以上),必须要考虑上传过程网络中断的情况.http的网络请求中本身就已经具备了分片上传功能,当传输的文件比较大时,http协议自动会将文件 ...
- vue大文件上传断点续传解决方案
之前仿造uploadify写了一个HTML5版的文件上传插件,没看过的朋友可以点此先看一下~得到了不少朋友的好评,我自己也用在了项目中,不论是用户头像上传,还是各种媒体文件的上传,以及各种个性的业务需 ...
随机推荐
- jaxb生成cdata块
1.需要添加一个适配器: import javax.xml.bind.annotation.adapters.XmlAdapter; public class AdapterCDATA extends ...
- C# LINQ标准查询操作符
首先添加数据集合 [Serializable] public class Racer : IComparable<Racer>, IFormattable { public Racer() ...
- MySQL8 设置大小写 正确步骤
在安装完成之后,初始化数据库之前,修改 my.cnf 打开mysql配置文件vim /etc/my.cnf 在尾部追加一行lower_case_table_names=1并保存,然后再初始化数据库. ...
- scrapy 4 学习 crawl spider
前情提要: 一:图片懒加载(面对图片懒加载怎么办) ---用selenium设置图片加载的位置 --- 分析懒加载的属性,直接获取 二: 如何提高scrapy的爬取效率 增加并发:默认scrapy开启 ...
- MultipartFile 类
本文链接:https://blog.csdn.net/Peter_S/article/details/84951978今天说下 MultipartFile 这个类吧,这两天正在用,也在网上查了查资料, ...
- MySQL 8.0.3性能大杀器 —— CATS 事务调度新算发
转载自:https://www.sohu.com/a/203933205_487483?sec=wd&spm=smpc.author.fd-d.2.1557386676880JSjtJwV 好 ...
- 从 s 点到 t 点的最短路(简单模板)(迪杰斯特拉)
迪杰斯特拉简单版 #include <bits/stdc++.h> using namespace std; int m,n; const int inf = 0x3f3f3f3f; in ...
- I Hate It (HDU 1754)
Problem 很多学校流行一种比较的习惯.老师们很喜欢询问,从某某到某某当中,分数最高的是多少. 这让很多学生很反感. 不管你喜不喜欢,现在需要你做的是,就是按照老师的要求,写一个程序,模拟老师 ...
- MONGODB 数据库回复备份
1.导出工具:mongoexport 1.概念: mongoDB中的mongoexport工具可以把一个collection导出成JSON格式或CSV格式的文件.可以通过参数指 ...
- Docker实践--搭建Yapi测试平台
背景:项目需要选择不同测试平台,筛选一个最佳平台 现状:一台机器安装多套环境,虚拟机太繁琐 解决方案:通过Docker模拟安装测环境 参考:https://blog.csdn.net/qq_32447 ...