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版的文件上传插件,没看过的朋友可以点此先看一下~得到了不少朋友的好评,我自己也用在了项目中,不论是用户头像上传,还是各种媒体文件的上传,以及各种个性的业务需 ...
随机推荐
- 2019牛客多校第五场generator2——BSGS&&手写Hash
题目 几乎原题 BZOJ3122题解 分析 先推一波公式,然后除去特殊情况分类讨论,剩下就是形如 $a^i \equiv b(mod \ p)$ 的方程,可以使用BSGS算法. 在标准的BSGS中,内 ...
- Shiro-Subject 分析(转)
Subject反正就好像呈现的视图.所有Subject 都绑定到SecurityManager,与Subject的所有交互都会委托给SecurityManager:可以把Subject认为是一个门面: ...
- 怎么学好js
Js给人那种感觉的原因多半是因为它如下的特点: A:本身知识很抽象.晦涩难懂,如:闭包.内置对象.DOM. B:本身内容很多,如函数库.对象库就一大堆. C:混合多种编程思想.它里面不但牵涉面向过程编 ...
- Linux文件删除的原理
Linux文件iNode和block是否删除是通过 i_link 和 i_count 的计数值来判断的.只有i_count 和 I_link 同时为0 的 时候,文件的 iNode和block才 ...
- STS工具各版本下载网址
官网网址:https://spring.io/tools3/sts/legacy
- Python—“helloworld”
接触一门计算机新语言,第一件事就是要准备好一个编译器用来打代码. 网上很多环境搭建的方法,具体参照https://www.runoob.com/python/python-install.html 由 ...
- ipv4保留地址
曾经以为保留地址下面三类.原来使用中还有很多的. A类 10.0.0.0--10.255.255.255 B类 172.16.0.0--172.31.255.255 C类 192.168.0.0--1 ...
- 数据分析之numpy使用
使用numpy生成数字 生成的类型是ndarray类型 t1 = np.array([1,2,3,4,5]) print(t1,type(t1)) # 类型为ndarray t2 = np.array ...
- [python]字典的直接赋值、浅拷贝和深拷贝解析
1.赋值引用 b = a: a 和 b 都指向同一个对象. 2.浅拷贝 b = a.copy(): a 和 b父对象是一个独立的对象,但他们的子对象还是指向统一对象(是引用). 3.深拷贝 b = ...
- IntelliJ IDEA 设置忽略SVN文件和文件夹
IntelliJ IDEA 在提交文件至SVN时,可以设置忽略某些文件和文件夹,以免误提交不需要提交的文件.最后,插个题外话,介绍一下如何设置代码默认折叠或者展开.下面使用IntelliJ ID ...