使用el-upload组件实现自定义上传
方式一：选择后自动上传
使用 http-request 覆盖默认的上传行为，可以自定义上传的实现
利用 before-upload 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise且被 reject，则停止上传
template 部分
<el-upload
class="pad"
ref="upload"
action="action"
:http-request="uploadBpmn"
:before-upload="beforeUpload">
<el-button size="medium" type="primary" class="el-icon-upload"> 部署流程定义</el-button>
</el-upload>js 部分
beforeUpload (file) { // 上传文件之前钩子
const type = file.name.split('.')[1]
if (type !== 'bpmn') {
this.$message({ type: 'error', message: '只支持bpmn文件格式！' })
return false
}
},
uploadBpmn (param) { // 部署流程定义（点击按钮，上传bpmn文件，上传成功后部署，然后重新加载列表）
const formData = new FormData()
formData.append('processDefinition', param.file) // 传入bpmn文件
this.$API({
name: 'deploy',
data: formData,
headers: {'Content-Type': 'multipart/form-data'}
}).then(res => {
if (res.data.code == 0) {
this.$message({ type: 'success', message: res.data.msg })
} else {
this.$message({ type: 'error', message: res.data.msg })
}
}).catch(error => {
this.$message({ type: 'error', message: error })
}).finally(() => {
this.getList()
})
},如果不想上传成功后显示上传文件列表，可以隐藏掉文件列表
可以在组件中设置 :show-file-list="false"
或者
::v-deep .el-upload-list {
display: none !important;
}方式二：选择后手动上传
<template>
<div class="app-upload">
<div class="upload-title">上传文件</div>
<el-upload
class="upload-demo"
ref="uploadBox"
drag
action="action"
:before-upload="beforeUpload"
:http-request="upload"
:auto-upload="false"
multiple>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
</el-upload>
<div class="upload-btn">
<el-button type="primary" @click="sure" :loading="loading">确 定</el-button>
</div>
</div>
</template><script>
const formData = new FormData()
export default {
data () {
return {
loading: false
}
},
methods: {
beforeUpload (file) { // 上传文件之前钩子
formData.append('files', file)
},
upload () {
this.loading = true
this.$API({
name: 'UploadResource',
data: formData,
params: {
path: this.$route.query.path
},
requireAuth: true
}).then (res => {
if (res.data.code === 200) {
this.$notify.success(res.data.msg)
} else {
this.$notify.error(res.data.msg)
}
}).catch(error => {
this.$notify.error(error)
}).finally(() => {
this.loading = false
this.reset()
})
},
sure () {
this.$refs.uploadBox.submit()
},
}
}
</script>使用el-upload上传文件夹
只需要为 input 输入框设置 webkitdirectory 属性
mounted() {
if (this.$route.query.type === 'folder') {
this.$nextTick(() => {
document.querySelector('.el-upload__input').webkitdirectory = true
})
}
},封装elementui el-upload文件上传组件
// 自定义的全局组件my-component
let _utils = new Utils()
Vue.component(
'uploadfile', {
props: {
uploaddata: {
type: Object
}
},
template: `<div style="margin:20px 0;">
<el-upload
accept=".xls,.xlsx"
class="upload-demo"
:action="uploaddata.url"
:before-upload="beforeUpload"
:on-success="handleSuccess"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
:limit="2"
:on-exceed="handleExceed">
<span>表名称:{{uploaddata.sheetname}}</span>
<el-button size="small" type="primary">选择文件</el-button>
<!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
</el-upload>
</div>`,
data() {
return {}
},
methods: {
beforeUpload(file){
const fileSuffix = file.name.substring(file.name.lastIndexOf(".")+1);
const whiteList = ["xls", "xlsx"];
if (whiteList.indexOf(fileSuffix) === -1) {
_utils.MessageError(this,"上传文件只能是xls、xlsx格式")
return false;
}
const isLt2M = file.size / 1024 / 1024 < 5;
if (!isLt2M) {
_utils.MessageError(this,"上传文件大小不能超过5MB")
return false;
}
},
handleRemove(file, fileList) {
},
handleSuccess(response, file, fileList) {
let {code, msg} = response
if (code == 0) {
utils.MessageSuccess(this, "文件上传成功")
} else {
utils.MessageError(this, msg)
}
},
handlePreview(file) {
// console.log(file);
},
handleExceed(files, fileList) {
},
beforeRemove(file, fileList) {
// return this.$confirm(`确定移除 ${file.name}？`);
}
}
}
)
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
