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版的文件上传插件,没看过的朋友可以点此先看一下~得到了不少朋友的好评,我自己也用在了项目中,不论是用户头像上传,还是各种媒体文件的上传,以及各种个性的业务需 ...
随机推荐
- 内网端口映射+dnslog
以前的DNSLOG部署在公网上也即自己的服务器上,产品依赖个人的环境不是很好.于是做了修改. 框架 细节 1)A域名的域名服务器指向B域名 ns0.B.com ns1.B.com 2)B域名的两个ns ...
- Java8-Lock-No.06
import java.util.concurrent.ExecutorService; import java.util.concurrent.Executors; import java.util ...
- [2019HDU多校第一场][HDU 6580][C. Milk]
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6580 题目大意:\(n\times m\)大小的方格上有\(k\)瓶水,喝完每瓶水都需要一定的时间.初 ...
- 'com.example.mybatisplus.mapper.PersonMapper' that could not be found.
通常有两种原因,配置原因,或者是mapper相关文件,mapper.java或 mapper.xml内部错误 如果是配置原因 解决方式1 统一配置mapper //import org.mybatis ...
- Django-常用异常
1 from rest_framework.authentication import BasicAuthentication raise AuthenticationFailed(res.dict) ...
- 2018年 第43届ACM-ICPC亚洲区域赛(青岛)现场赛 赛后总结
下了动车后,又颠颠簸簸的在公交车上过了接近一个小时,本来就晕车,于是,到的时候脑子晕死了,而且想吐.可能是没吃早饭的缘故,午饭好好次QWQ. 开幕式 还是第一次在这种环境下参赛,记得以前是看老师发的学 ...
- (转)Git操作
本地修改了许多文件,其中有些是新增的,因为开发需要这些都不要了,想要丢弃掉,可以使用如下命令: git checkout . #本地所有修改的.没有的提交的,都返回到原来的状态 git stash # ...
- 使用Ajax向SpringMVC传递Json数据
这篇文章已经过时了. 请参考比较合适的前后端交互方式. 1.保证SpringMVC配置成功了. 2.在pom.xml中追加Jackson相关的依赖 <dependency> <gro ...
- ubuntu14.04重启网卡的三种方法
Linux重启网卡的三种方法: 一.network 利用root帐户 # service network restart 或者/etc/init.d/networking restart 二.ifdo ...
- redis之不重启,切换RDB备份到AOF备份
确保redis版本在2.2以上 [root@pyyuc /data 22:23:30]#redis-server -v Redis server v=4.0.10 sha=00000000:0 mal ...