el-upload 并不支持IE9环境, 于是自己简单封装了一个支持IE9的Upload组件(基于 Web Uploader)
效果:
上传中
上传完成
组件:
<template>
<div class="upload-container">
<div id="upload" style="display: inline-block;">
<el-button size="small" :loading="showPercentage" type="primary">{{title}}</el-button>
</div>
<el-tag
v-if="uploadFile"
size="small"
type="success"
closable
:title="uploadFile.name"
@close="removeUploadFile">
{{ uploadFile.name | nameFilter }}
</el-tag>
<el-progress
v-if="showPercentage"
style="display: inline-block; width: 100px;"
:percentage="percentage"
:color="uploadColorMethod">
</el-progress>
</div>
</template>
<script>
export default {
name: 'UploadButton',
filters: {
nameFilter(name) {
if (name.length > 20) return name.substring(0, 20) + '...'
return name
}
},
props: {
title: {
type: String,
require: false,
default: () => '上传'
},
// 上传之前的回调方法, 该方法可返回自定义的上传参数
beforeUpload: {
type: Function,
require: true,
default: () => ''
}
},
data() {
return {
showPercentage: false,
percentage: 0,
uploadFile: '',
uploadData: {}
}
},
mounted() {
this.$nextTick(() => {
this.initUpload()
})
},
methods: {
initUpload() {
const _this = this
// eslint-disable-next-line
const uploader = WebUploader.create({
// 选完文件后，是否自动上传。
auto: true,
// swf文件路径, 此文件需要放到public文件夹下, 这样打包后dist中的vendor下有Uploader.swf文件
// 注意文件路径是否跨域, 否则IE9下上传按钮将失效
swf: window.location.href.split('/#')[0] + '/vendor/uploader.swf',
// 文件接收服务端。
server: '/YourPath',
pick: {
// 选择文件的按钮。可选。
id: '#upload',
// 是否支持多选
multiple: false
},
// 允许类型, 必填, 否则IE9下上传按钮将失效
accept: {
title: 'Excel',
extensions: 'xls,xlsx',
mimeTypes: ''.XLS,.xlsx''
},
// 支持重复上传
duplicate: true
})
uploader.on('beforeFileQueued', function (file) {
if (_this.beforeUpload) {
_this.beforeUpload(file).then(uploadData => {
_this.uploadData = uploadData
return true
})
} else {
return true
}
})
uploader.on('uploadBeforeSend', function (object, data, headers) {
// 移除默认的参数
_this.showPercentage = true
delete data.id
delete data.name
delete data.type
delete data.lastModifiedDate
delete data.size
// jq 的扩展, 可以用其他方法代替
data = $.extend(data, _this.uploadData)
})
uploader.on('uploadProgress', function (file, percentage) {
if (percentage === 1) percentage = 0.99
_this.percentage = percentage * 100
})
uploader.on('uploadComplete', function(file) {
_this.percentage = 100
})
uploader.on('uploadSuccess', function (file, res) {
_this.showPercentage = false
if (res.status === 200) {
// 保存当前文件
_this.uploadFile = file
_this.$message.success('上传成功')
_this.$emit('onSuccess', res, file)
} else {
_this.$emit('onError')
_this.$message.error('上传失败：' + res.message)
}
})
uploader.on('uploadError', function (file) {
_this.showPercentage = false
_this.$message.error('上传失败')
_this.$emit('onError')
})
},
removeUploadFile() {
this.uploadFile = ''
this.$emit('onRemove')
},
uploadColorMethod(percentage) {
if (percentage < 50) {
return '#909399'
} else if (percentage < 100) {
return '#e6a23c'
} else {
return '#67c23a'
}
}
}
}
</script>
<style type="css">
.webuploader-container {
position: relative;
vertical-align: middle;
}
.webuploader-element-invisible {
position: absolute !important;
clip: rect(1px 1px 1px 1px);
clip: rect(1px,1px,1px,1px);
}
.webuploader-pick {
position: relative;
display: inline-block;
cursor: pointer;
text-align: center;
}
</style>
使用:
<!-- index.html 添加 -->
<script src="//cdn.staticfile.org/webuploader/0.1.5/webuploader.js"></script>
<upload-button
title="名单上传"
class="upload-demo"
:before-upload="beforeUpload"
@onSuccess="onSuccess"
@onRemove="onRemove"
@onError="onError">
</upload-button>
methods: {
beforeUpload(file) {
const uploadData = {
fileName: file.name
}
return new Promise((resolve) => {
this.$nextTick(() => {
resolve(uploadData)
})
})
},
onSuccess(response, file) {
}
}
