<!-- 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实现文件上传的更多相关文章

  1. springboot+vue实现文件上传

    https://blog.csdn.net/mqingo/article/details/84869841 技术: 后端:springboot 前端框架:vue 数据库:mysql pom.xml: ...

  2. vue+springboot文件上传

    //vue element-ui组件 <el-upload style="position: relative;top: -40px;left: 240px;"        ...

  3. vue element-ui 文件上传

    <el-upload class="upload-demo" action="" :before-remove="beforeRemove&qu ...

  4. vue + element 文件上传 并将文件转 base64

    当时有一个需求 是需要用到上传文件这个功能,并且需要将文件转为 base64 给到后台.网上找的全是啥图片转base64 肯定是因为这类需求比较常见.当时有点懵了.后面一想,都他娘是文件啊.然后就找到 ...

  5. vue大文件上传控件选哪个好?

    需求: 项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在20G内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以20G来进行限制. PC端全平台支持,要求支持Window ...

  6. vue大文件上传插件选哪个好?

    文件夹数据库处理逻辑 public class DbFolder { JSONObject root; public DbFolder() { this.root = new JSONObject() ...

  7. vue大文件上传组件选哪个好?

    需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制. 第一步: 前端修改 由于项目使用的是 ...

  8. vue+大文件上传控件

    总结一下大文件分片上传和断点续传的问题.因为文件过大(比如1G以上),必须要考虑上传过程网络中断的情况.http的网络请求中本身就已经具备了分片上传功能,当传输的文件比较大时,http协议自动会将文件 ...

  9. vue大文件上传断点续传解决方案

    之前仿造uploadify写了一个HTML5版的文件上传插件,没看过的朋友可以点此先看一下~得到了不少朋友的好评,我自己也用在了项目中,不论是用户头像上传,还是各种媒体文件的上传,以及各种个性的业务需 ...

随机推荐

  1. 2019牛客多校第五场generator2——BSGS&&手写Hash

    题目 几乎原题 BZOJ3122题解 分析 先推一波公式,然后除去特殊情况分类讨论,剩下就是形如 $a^i \equiv b(mod \ p)$ 的方程,可以使用BSGS算法. 在标准的BSGS中,内 ...

  2. Shiro-Subject 分析(转)

    Subject反正就好像呈现的视图.所有Subject 都绑定到SecurityManager,与Subject的所有交互都会委托给SecurityManager:可以把Subject认为是一个门面: ...

  3. 怎么学好js

    Js给人那种感觉的原因多半是因为它如下的特点: A:本身知识很抽象.晦涩难懂,如:闭包.内置对象.DOM. B:本身内容很多,如函数库.对象库就一大堆. C:混合多种编程思想.它里面不但牵涉面向过程编 ...

  4. Linux文件删除的原理

    Linux文件iNode和block是否删除是通过  i_link  和 i_count 的计数值来判断的.只有i_count  和 I_link 同时为0 的 时候,文件的 iNode和block才 ...

  5. STS工具各版本下载网址

    官网网址:https://spring.io/tools3/sts/legacy

  6. Python—“helloworld”

    接触一门计算机新语言,第一件事就是要准备好一个编译器用来打代码. 网上很多环境搭建的方法,具体参照https://www.runoob.com/python/python-install.html 由 ...

  7. 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 ...

  8. 数据分析之numpy使用

    使用numpy生成数字 生成的类型是ndarray类型 t1 = np.array([1,2,3,4,5]) print(t1,type(t1)) # 类型为ndarray t2 = np.array ...

  9. [python]字典的直接赋值、浅拷贝和深拷贝解析

    1.赋值引用 b = a: a 和 b 都指向同一个对象. 2.浅拷贝 b = a.copy():  a 和 b父对象是一个独立的对象,但他们的子对象还是指向统一对象(是引用). 3.深拷贝 b = ...

  10. IntelliJ IDEA 设置忽略SVN文件和文件夹

       IntelliJ IDEA 在提交文件至SVN时,可以设置忽略某些文件和文件夹,以免误提交不需要提交的文件.最后,插个题外话,介绍一下如何设置代码默认折叠或者展开.下面使用IntelliJ ID ...