<!-- 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. Miller-Rabin素性测试

    有时候我们想快速的知道一个数是不是素数,而这个数又特别的大导致 $O(\sqrt n)$ 的算法也难以通过,这时候我们可以对其进行 Miller-Rabin 素数测试,可以很大概率测出其是否为素数. ...

  2. sql server 存储过程的详解

    SqlServer存储过程详解 1.创建存储过程的基本语法模板: if (exists (select * from sys.objects where name = 'pro_name')) dro ...

  3. MySQL 几种性能测试的工具使用

    近期由于要比较mysql及其分支mariadb, percona的性能,了解了几个这方面的工具,包括:mysqlslap sysbench tpcc-mysql,做一个整理,备忘,分享 1.mysql ...

  4. bzoj 3545

    bzoj 3555 离线版本 线段树合并 做法是将询问和边权都排序 给每个点建一棵线段树 然后边建mst边回答询问 每次合并两个连通块的时候 要将两个连通块的线段树合并起来 线段树合并部分code i ...

  5. bzoj3508: 开灯

    题目链接 题解 设\(b[i]=a[i]\ xor\ a[i+1]\) 我们可以发现,修改只会改变\(b[l-1]\)和\(b[r]\) 然后发现\(b[i]=1\)的点最多\(2*k\)个 状压\( ...

  6. c实现双向链表

    实现双向链表:创建.插入.删除 #include <iostream> #include <stdio.h> #include <string.h> #includ ...

  7. HDU 4374 One hundred layer(单调队列DP)

    题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=116242#problem/E 题意:差不多就是男人勇下百层的游戏.从第一层到最 ...

  8. Selenium处理页面懒加载方法

    在做selenium webdriver  在做UI自动化时,有些页面时使用懒加载的形式显示页面图片,如果在不向下移动滚动条时,获取到的图片会是网站的默认图片和真实的图片不相符. 1.滑动滚动条 1. ...

  9. Jenkins修改显示语言为中文

    1 安装插件 主界面 -> 系统管理 -> 插件管理 -> 可选插件 1.1 安装插件Locale plugin 1.2 安装插件Localization: Chinese(Simp ...

  10. ntp时间同步服务器的搭建

    CentOS系统一般自带安装有ntp服务,仅需做相关配置即可. 一.配置ntp服务器: 在选定的ntp服务器上vim /etc/ntp.conf 添加一行:restrict default nomod ...