使用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: { /* 上传文件之前的钩子,参数为上传的文件, 若返回 false 或者返回 Promise 且被 reject,则停止上传。 */ 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) { }, /* 删除文件之前的钩子,参数为上传的文件和文件列表, 若返回 false 或者返回 Promise 且被 reject,则停止删除 */ beforeRemove(file, fileList) { // return this.$confirm(`确定移除 ${file.name}?`); } } } )
以上为个人经验,希望能给大家一个参考,也希望大家多多支持阿兔在线工具。