关于vue+element对ie9的兼容el-upload不支持在IE9上传
关于vue+element对ie9的兼容el-upload不支持在IE9上传
https://lian-yue.github.io/vue-upload-component/#/zh-cn/
解决方案 采用vue-upload-component
npm install vue-upload-component --save
<template>
<div class="app-container">
<el-row class="page-content">
<el-col :span="24" style="margin:20px">
<el-form label-width="200px" class="addform"> <el-form-item label="附件">
<file-upload
class="el-button margin_left10 el-button--primary el-button--small"
style="overflow:visible"
:maximum="1"
:multiple="false"
ref="upload"
v-model="files"
post-action="url"
@input-file="inputFile"
@input-filter="inputFilter"
>
<span style="color:#FFFFFF">选取文件</span>
</file-upload>
<el-button
size="small"
type="primary"
v-show="!$refs.upload || !$refs.upload.active"
@click.prevent="$refs.upload.active = true"
>
<span style="color:#FFFFFF">开始上传</span>
</el-button>
</el-form-item>
<el-form-item label="文件列表" class="fileList" v-show=" files.length>0">
<ul class="el-upload-list el-upload-list--text">
<li class="el-upload-list__item is-ready" v-for="(file,index) in files" :key="index">
<span>{{file.name}}</span>
</li>
</ul>
</el-form-item>
</el-form> </el-col>
</el-row>
</div>
</template>
<script>
import { getFileId, deleteFileId } from "@/api/flca";
import "vue-upload-component/dist/vue-upload-component.part.css";
import FileUpload from "vue-upload-component";
export default {
components: {
FileUpload
},
data() {
return {
files: [],
};
},
methods: {
upLoad() {
this.$refs.upload.active = true;
},
inputFilter(newFile, oldFile, prevent) {
if (newFile && !oldFile) {
const extension = newFile.name.substring(newFile.name.lastIndexOf(".") + 1);
console.log(extension);
if (extension =='pdf' ||extension =='PDF' ) { } else {
this.$message({
message: "上传文件只能是pdf格式文件!",
type: "warning"
});
return prevent();
}
}
},
inputFile(newFile, oldFile) {
if (newFile && oldFile) {
// 更新文件 // 开始上传
if (newFile.active !== oldFile.active) {
console.log("Start uploa3333333333333333d",newFile.size)
console.log("Start upload", newFile.active, newFile);
this.isXls = false;
} // 上传进度
if (newFile.progress !== oldFile.progress) {
console.log("progress", newFile.progress, newFile);
} // 上传错误
if (newFile.error !== oldFile.error) {
console.log("error", newFile.error, newFile);
this.$message({ message: "上传失败!", type: "error" });
} // 上传成功
if (newFile.success !== oldFile.success) {
console.log("success", newFile.success, newFile);
this.$message({ message: "上传成功!", type: "success" });
}
}
}
}
};
</script>
关于vue+element对ie9的兼容el-upload不支持在IE9上传的更多相关文章
- vue项目内嵌入到app input type=file 坑(文件上传插件)
w问题描述: 我用vue-cli完成的一个移动端项目,内嵌到app当中,用原生的input type=file 来完成文件上传.在安卓下没有问题但是在苹果手机 上传第二次手机就会发生白屏 并无缘无故跳 ...
- 【转载】兼容php5,php7的cURL文件上传示例
转载来自: http://www.huanlinna.com/2016/06/25/coding/php5-php7-upload-demo-via-curl.html https://segment ...
- FormData兼容IE10 360及DWR的异步上传原理
摘自:https://github.com/henryluki/FormData/blob/master/formdata.js if(!window.FormData) { (function(se ...
- VUE项目中文件上传兼容IE9
项目使用VUE编写,UI是ElementUI,但是Element的Upload组件是不兼容IE9的.因为IE9中无法使用FormData. 查找资料基本有两种解决方法:1.引入JQuery和jQuer ...
- 封装Vue Element的upload上传组件
本来昨天就想分享封装的这个upload组件,结果刚写了两句话,就被边上的同事给偷窥上了,于是在我全神贯注地写分享的时候他就神不知鬼不觉地突然移动到我身边,腆着脸问我在干啥呢.卧槽你妈,当场就把我吓了一 ...
- axios+Vue上传文件显示进度
一,前言 最近在用Vue,然后上传文件时需要显示进度,于是网上搜了一下,经过自己实测终于也弄明白了 二,效果 三,代码 HTML代码 <div id="app"> &l ...
- springBoot+ vue+ Element-ui实现合并多图上传(一次请求多张图片)
这次上传使用的是Elemet-ui的uoload上传组件,组件预留的钩子回调还是比较充足的. 1: 实现多图上传主要用到以下两个属性: 下面讲一下属性使用: <el-upload :actio ...
- vue+axios实现移动端图片上传
在利用vue做一些H5页面时,或多或少会遇到有图片上传的操作,主要是运用html5里面的input[type=file]来实现,传递到后端的数据是以二进制的格式传递,所以上传图片的请求与普通的请求稍微 ...
- vue图片上传组件
前言:很多项目中都需要用到图片上传功能,而其多处使用的要求,为了避免重复造轮子,让我决定花费一些时间去深入了解,最终封装了一个vue的图片上传组件.现将总结再次,希望有帮助. Layout <d ...
- element中文件上传
vue+element 文件操作 作者:一粒尘土 时间:2019-3-17 注:以下操作针对 vue-cli 目录 使用 组件常用参数 组件常用方法 上传文件 上传文件格式限制 回显文件 下载文件 删 ...
随机推荐
- (2).mybatis单元测试(junit测试)
一.Junit使用步骤:1.创建测试目录,(src.测试目录是test)2.在测试目录test中创建与src中相同的包名3.为需要测试的类创建测试类,例如:UsersMapper,测试类是UsersM ...
- Spring源码阅读 之 配置的加载(希望有喜欢源码的朋友一起交流)
想写Spring的源码方面的东西想了好久了,之前花了一段时间学习了SpringCloud,现在总算对SpringCloud有了一个大概的了解,从今天开始好好读一篇Spring的源码,结合书本跟网上的一 ...
- HTTP接口测试
HTTP接口测试 1.1 get接口 请求URL http://api.nnzhp.cn/api/user/stu_info 请求方式 get 请求参数 参数名 必选 类型 说明 stu_name 是 ...
- R语言:日薪和应发工资
生产部门普通员工为日薪,有时要知道日薪和应发工资的转换关系.做表一为日薪取整数,白天工资+晚上工资=应发工资,延长工作时间取时薪的1.5倍,应发工资保留到十位.做表二为应发工资取十的倍数,推算相应日薪 ...
- WEB程序报错Address localhost:1099 is already in use的解决方案(网络端口被占用导致程序无法运行)
首先,这是说明你的本地端口1099已经被占用了,解决的方法有两个: 1.停止本地占用端口 打开cmd 按如下指令进行命令输入,就能找出占用端口的进程并停止啦 2.修改程序运行端口 一个问题,两种解决办 ...
- 10JAVA基础-常用类02
Arrays 工具类,构造方法私有 //将数组转变为字符串 String str = Arrays.toString(int[] value); //对于原数组进行排序,升序 Arrays.sort( ...
- Codeforces Round #643 (Div.2)
前言:这套cf我感觉出的很不错,AB就不说了,唯一有点欠缺的就是C和D的位置应该换一下,C出的挺不错,反正我当时没有想出来(赛后补题的时候其实也不难..听朋友说还可以FFT优化,然而我是个图论手并不会 ...
- 【比较】粒子群算法PSO 和 遗传算法GA 的相同点和不同点
目录 PSO和GA的相同点 PSO和GA不同点 粒子群算法(PSO)和遗传算法(GA)都是优化算法,都力图在自然特性的基础上模拟个体种群的适应性,它们都采用一定的变换规则通过搜索空间求解. PSO和G ...
- python3.x 基础一:str字符串方法
*字符串不能更改值 数据类型字符串str | capitalize(...) 返回字符串中第一个字母大写 | S.capitalize() -> str | | ...
- 【Spring】Spring AOP详解(转载)
一.前言 在以前的项目中,很少去关注spring aop的具体实现与理论,只是简单了解了一下什么是aop具体怎么用,看到了一篇博文写得还不错,就转载来学习一下,博文地址:http://www.cnbl ...