<!-- 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. spring timetask 定时任务调度

    作者:Garry1115 定时任务调度即在设置的特定时间执行特定的任务,不需要人工干预. spring timertask spring 自身所带定时任务类,不需要引入第三方jar包,使用方式如下: ...

  2. 将 Python 程序打包成 .exe 文件

    1.简介 做了一个excel的风控模板,里面含有宏,我用python的第三方xlwings部署到linux后发现,linux环境并不支持xlwings. Python 程序都是脚本的方式,一般是在解析 ...

  3. 通过德鲁伊druid给系统增加监控

    系统在线上运行了一段时间后,比如一年半载的,我们发现系统可能存在某些问题,比如执行系统变慢了,比如某些spring的bean无法监控各种调用情况. 触发到db的各种执行情况,这个时候,我们就需要一个工 ...

  4. java-十五周作业

    题目1:编写一个应用程序,输入用户名和密码,访问test数据库中t_login表(字段包括id.username.password),验证登录是否成功. 题目2:在上一题基础上,当登录成功后,将t_u ...

  5. [Number]js中数字存储(0.1 + 0.2 !== 0.3)

    和其他编程语言(如 C 和 Java)不同,JavaScript 不区分整数值和浮点数值, 所有数字在 JavaScript 中均用浮点数值表示,遵循IEEE754标准,在进行数字运算的时候要特别注意 ...

  6. windows下SVN日志反馈中文乱码的解决方法

    转自:https://shiyousan.com/post/635889908703806636 TortoiseSVN中文乱码的问题困扰了我好久,特别是每次使用“以标准差异文件显示修改”时,打开的文 ...

  7. 【概率论】3-6:条件分布(Conditional Distributions Part II)

    title: [概率论]3-6:条件分布(Conditional Distributions Part II) categories: Mathematic Probability keywords: ...

  8. 我终于搞清楚了和String有关的那点事儿。

    String,是Java中除了基本数据类型以外,最为重要的一个类型了.很多人会认为他比较简单.但是和String有关的面试题有很多,下面我随便找两道面试题,看看你能不能都答对: Q1:String s ...

  9. mac: jenkins+ant+jmeter接口测试

    最近研究Jenkins平台上使用ant进行集成测试,在网上查阅了很多资料,将 jenkins+ant+jmeter简单使用方法记录下来,方便以后查阅.有很多不足之处,后期不断优化. 一.环境搭建 1. ...

  10. 常使用的VIM命令及文件颜色代表含义

    编辑模式--->输入模式 i : insert 在光标所在处输入: a:append 在光标所在处后面输入: o:在当前光标所在行的下方打开一个新行: I:在当前光标所在行的行首输入: A:在当 ...