113 lines
2.8 KiB
Vue
113 lines
2.8 KiB
Vue
<template>
|
||
<el-upload :file-list="_value"
|
||
:action="uploadFileUrl"
|
||
:headers="headers"
|
||
:limit="maxSize"
|
||
with-credentials
|
||
:multiple="maxSize > 0"
|
||
:data="uploadParams"
|
||
:show-file-list="showFileList"
|
||
:auto-upload="true"
|
||
:before-upload="beforeUpload"
|
||
:on-success="handleUploadSuccess"
|
||
:on-error="uploadError"
|
||
:before-remove="beforeRemove"
|
||
:on-remove="handleRemove"
|
||
>
|
||
<el-button color="#DED0B2" :loading="loading">上传文件</el-button>
|
||
</el-upload>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {ElMessage,ElMessageBox} from "element-plus";
|
||
import {getToken} from '@/utils/auth'
|
||
const baseURL = import.meta.env.VITE_BASE_URL
|
||
const uploadFileUrl = ref(baseURL + "/workflow/process/file/upload")
|
||
const headers = reactive({
|
||
authorization: getToken()
|
||
})
|
||
const disabled = ref(false)
|
||
const loading = ref(false)
|
||
const showTable = ref(false)
|
||
const uploadParams = ref({})
|
||
const props = defineProps({
|
||
value: {
|
||
type: Array,
|
||
default: () => {
|
||
return []
|
||
}
|
||
},
|
||
maxSize: {
|
||
type: Number,
|
||
default: 30
|
||
},
|
||
showFileList: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
})
|
||
|
||
const emit = defineEmits(["input", "getFile","delete"])
|
||
const fileList = ref([])
|
||
const _value = computed({
|
||
get() {
|
||
return props.value;
|
||
},
|
||
set(val) {
|
||
emit("input", val);
|
||
}
|
||
})
|
||
const beforeRemove = (file, fileList) => {
|
||
return ElMessageBox.confirm(`确认删除名称为${file.name}的文件吗?`, '系统提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => true)
|
||
}
|
||
|
||
const handleRemove = (file, fileList) => {
|
||
emit("delete",file.response.data.id)
|
||
}
|
||
const beforeUpload = (file) => {
|
||
// const FileExt = file.name.replace(/.+\./, "");
|
||
// if (['zip', 'rar', 'pdf', 'doc', 'docx', 'xlsx'].indexOf(FileExt.toLowerCase()) === -1) {
|
||
// ElMessage.warning('请上传后缀名为pdf、doc、docx、xlsx、zip或rar的文件！');
|
||
// return false;
|
||
// } else
|
||
// if (props.maxSize > 0 && file.size / 1024 / 1024 > props.maxSize) {
|
||
// ElMessage.warning(`每个文件最大不超过 ${props.maxSize}MB`)
|
||
// } else {
|
||
loading.value = true
|
||
return true
|
||
// }
|
||
}
|
||
const handleUploadSuccess = (res, file) => {
|
||
if (res.code !== 1000) {
|
||
loading.value = false
|
||
ElMessage.error("上传失败")
|
||
} else {
|
||
loading.value = false
|
||
ElMessage.success("上传成功")
|
||
}
|
||
showTable.value = true
|
||
let data = res.data
|
||
fileList.value.push(data)
|
||
emit("getFile", res.data)
|
||
}
|
||
const uploadError=(err)=>{
|
||
loading.value = false
|
||
ElMessage.error("上传失败，请稍后再试！")
|
||
}
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
a {
|
||
font-size: 14px;
|
||
color: #2a99ff;
|
||
}
|
||
:deep(.el-upload-list) {
|
||
width: 400px;
|
||
}
|
||
</style>
|