wenyongda/ZRAdmin-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改上传组件上传成功后异常

Browse Source
This commit is contained in:
不做码农 2022-04-25 09:58:51 +08:00
parent cafacdfe2f
commit cdbbaa8947
2 changed files with 104 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

178
src/components/FileUpload/index.vue
View File

@ -1,33 +1,50 @@
<template> <template>
<div class="upload-file"> <div class="upload-file">
<el-upload :action="uploadFileUrl" :before-upload="handleBeforeUpload" :file-list="fileList" :limit="limit" :on-error="handleUploadError" :on-exceed="handleExceed" :on-success="handleUploadSuccess" <el-upload
:show-file-list="false" :data="data" :drag="drag" :headers="headers" class="upload-file-uploader" ref="upload"> multiple
:action="uploadFileUrl"
:before-upload="handleBeforeUpload"
:file-list="fileList"
:limit="limit"
:on-error="handleUploadError"
:on-exceed="handleExceed"
:on-success="handleUploadSuccess"
:show-file-list="false"
:data="data"
:drag="drag"
:headers="headers"
class="upload-file-uploader"
ref="upload"
>
<!-- 拖拽上传 --> <!-- 拖拽上传 -->
<template v-if="drag">
<el-icon v-if="drag" class="el-icon--upload"> <el-icon class="el-icon--upload">
<upload-filled /> <upload-filled />
</el-icon> </el-icon>
<div class="el-upload__text" v-if="drag"> <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
将文件拖到此处，或<em>点击上传</em> </template>
</div>
<!-- 上传按钮 --> <!-- 上传按钮 -->
<el-button type="primary" icon="upload" v-if="!drag">选取文件</el-button> <el-button type="primary" icon="upload" v-if="!drag">选取文件</el-button>
<!-- 上传提示 --> <!-- 上传提示 -->
<template #tip> <template #tip>
<div class="el-upload__tip" v-if="showTip"> <div class="el-upload__tip" v-if="showTip">
请上传 请上传
<template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template> <template v-if="fileSize">
<template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
</template>
<template v-if="fileType">
格式为 <b style="color: #f56c6c">{{ fileType.join('/') }}</b>
</template>
的文件 的文件
</div> </div>
</template> </template>
</el-upload> </el-upload>
<!-- 文件列表 --> <!-- 文件列表 -->
<transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul"> <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
<li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList"> <li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
<el-link :href="`${baseUrl}${file.url}`" :underline="false" target="_blank"> <el-link :href="`${file.url}`" :underline="false" target="_blank">
<span class="el-icon-document"> {{ getFileName(file.name) }} </span> <svg-icon class-name="doc-icon" icon-class="documentation" />
{{ file.name }}
</el-link> </el-link>
<div class="ele-upload-list__item-content-action"> <div class="ele-upload-list__item-content-action">
<el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link> <el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>
@ -38,7 +55,7 @@
</template> </template>
<script setup> <script setup>
import { getToken } from "@/utils/auth"; import { getToken } from '@/utils/auth'
const props = defineProps({ const props = defineProps({
modelValue: [String, Object, Array], modelValue: [String, Object, Array],
@ -55,7 +72,7 @@ const props = defineProps({
// 文件类型, 例如['png', 'jpg', 'jpeg'] // 文件类型, 例如['png', 'jpg', 'jpeg']
fileType: { fileType: {
type: Array, type: Array,
default: () => ["doc", "xls", "ppt", "txt", "pdf"], default: () => ['doc', 'xls', 'ppt', 'txt', 'pdf'],
}, },
// 是否显示提示 // 是否显示提示
isShowTip: { isShowTip: {
@ -78,127 +95,131 @@ const props = defineProps({
data: { data: {
type: Object, type: Object,
}, },
}); })
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance()
const emit = defineEmits(); const emit = defineEmits()
const baseUrl = import.meta.env.VITE_APP_BASE_API; const number = ref(0)
const uploadFileUrl = ref( const uploadList = ref([])
import.meta.env.VITE_APP_BASE_API + "/common/UploadFile" const baseUrl = import.meta.env.VITE_APP_BASE_API
); // 上传的图片服务器地址 const uploadFileUrl = ref(baseUrl + import.meta.env.VITE_APP_UPLOAD_URL ?? '/Common/UploadFile') // 上传的图片服务器地址
const headers = ref({ Authorization: "Bearer " + getToken() }); const headers = ref({ Authorization: 'Bearer ' + getToken() })
const fileList = ref([]); const fileList = ref([])
const showTip = computed( const showTip = computed(() => props.isShowTip && (props.fileType || props.fileSize))
() => props.isShowTip && (props.fileType || props.fileSize)
);
watch( watch(
() => props.modelValue, () => props.modelValue,
(val) => { (val) => {
if (val) { if (val) {
let temp = 1; let temp = 1
// 首先将值转为数组 // 首先将值转为数组
const list = Array.isArray(val) ? val : props.modelValue.split(","); const list = Array.isArray(val) ? val : props.modelValue.split(',')
// 然后将数组转为对象数组 // 然后将数组转为对象数组
fileList.value = list.map((item) => { fileList.value = list.map((item) => {
if (typeof item === "string") { var fileName = item.slice(item.lastIndexOf('/') + 1)
item = { name: item, url: item }; if (typeof item === 'string') {
item = { name: fileName, url: item }
} }
item.uid = item.uid || new Date().getTime() + temp++; item.uid = item.uid || new Date().getTime() + temp++
return item; return item
}); })
// uploadList.value = fileList
} else { } else {
fileList.value = []; fileList.value = []
return []; return []
} }
} },
); { deep: true, immediate: true },
)
// 上传前校检格式和大小 // 上传前校检格式和大小
function handleBeforeUpload(file) { function handleBeforeUpload(file) {
// 校检文件类型 // 校检文件类型
if (props.fileType.length) { if (props.fileType.length) {
let fileExtension = ""; let fileExtension = ''
if (file.name.lastIndexOf(".") > -1) { if (file.name.lastIndexOf('.') > -1) {
fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1); fileExtension = file.name.slice(file.name.lastIndexOf('.') + 1)
} }
const isTypeOk = props.fileType.some((type) => { const isTypeOk = props.fileType.some((type) => {
if (file.type.indexOf(type) > -1) return true; if (file.type.indexOf(type) > -1) return true
if (fileExtension && fileExtension.indexOf(type) > -1) return true; if (fileExtension && fileExtension.indexOf(type) > -1) return true
return false; return false
}); })
if (!isTypeOk) { if (!isTypeOk) {
proxy.$modal.msgError( proxy.$modal.msgError(`文件格式不正确, 请上传${props.fileType.join('/')}格式文件!`)
`文件格式不正确, 请上传${props.fileType.join("/")}格式文件!` return false
);
return false;
} }
} }
// 校检文件大小 // 校检文件大小
if (props.fileSize) { if (props.fileSize) {
const isLt = file.size / 1024 / 1024 < props.fileSize; const isLt = file.size / 1024 / 1024 < props.fileSize
if (!isLt) { if (!isLt) {
proxy.$modal.msgError(`上传文件大小不能超过 ${props.fileSize} MB!`); proxy.$modal.msgError(`上传文件大小不能超过 ${props.fileSize} MB!`)
return false; return false
} }
} }
return true; proxy.$modal.loading('正在上传文件，请稍候...')
number.value++
return true
} }
// 文件个数超出 // 文件个数超出
function handleExceed() { function handleExceed() {
proxy.$modal.msgError(`上传文件数量不能超过 ${props.limit} 个!`); proxy.$modal.msgError(`上传文件数量不能超过 ${props.limit} 个!`)
} }
// 上传失败 // 上传失败
function handleUploadError(err) { function handleUploadError(err) {
proxy.$modal.msgError("上传失败"); proxy.$modal.msgError('上传失败')
} }
// 上传成功回调 // 上传成功回调
function handleUploadSuccess(res, file) { function handleUploadSuccess(response, uploadFile) {
if (res.code != 200) { if (response.code != 200) {
fileList.value = []; fileList.value = []
proxy.$modal.msgError(`上传失败，原因:${res.msg}!`); proxy.$modal.msgError(`上传失败，原因:${response.msg}!`)
return; proxy.$modal.closeLoading()
return
}
const { fileName, url, fileId } = response.data
const tempFile = { name: fileName, url: url }
uploadList.value.push(tempFile)
if (uploadList.value.length === number.value) {
fileList.value = fileList.value.filter((f) => f.url !== undefined).concat(uploadList.value)
uploadList.value = []
number.value = 0
emit('update:modelValue', listToString(fileList.value))
proxy.$modal.closeLoading()
} }
proxy.$modal.msgSuccess("上传成功");
fileList.value.push({
name: res.data.fileName,
url: res.data.url,
path: res.data.path,
});
emit("success", props.column, listToString(fileList.value));
emit("update:modelValue", listToString(fileList.value));
} }
// 删除文件 // 删除文件
function handleDelete(index) { function handleDelete(index) {
fileList.value.splice(index, 1); fileList.value.splice(index, 1)
emit("update:modelValue", listToString(fileList.value)); emit('update:modelValue', listToString(fileList.value))
} }
// 获取文件名称 // 获取文件名称
function getFileName(name) { function getFileName(name) {
if (name.lastIndexOf("/") > -1) { if (name.lastIndexOf('/') > -1) {
return name.slice(name.lastIndexOf("/") + 1).toLowerCase(); return name.slice(name.lastIndexOf('/') + 1).toLowerCase()
} else { } else {
return ""; return ''
} }
} }
// 对象转成指定字符串分隔 // 对象转成指定字符串分隔
function listToString(list, separator) { function listToString(list, separator) {
let strs = ""; let strs = ''
separator = separator || ","; separator = separator || ','
for (let i in list) { for (let i in list) {
strs += list[i].url + separator; strs += list[i].url + separator
} }
return strs != "" ? strs.substr(0, strs.length - 1) : ""; return strs != '' ? strs.substr(0, strs.length - 1) : ''
} }
// 提交上传 // 提交上传
function submitUpload() { function submitUpload() {
this.$refs.upload.submit(); this.$refs.upload.submit()
} }
</script> </script>
@ -221,4 +242,7 @@ function submitUpload() {
.ele-upload-list__item-content-action .el-link { .ele-upload-list__item-content-action .el-link {
margin-right: 10px; margin-right: 10px;
} }
.doc-icon {
margin: 0 10px;
}
</style> </style>

3
src/components/ImageUpload/index.vue
View File

@ -115,11 +115,10 @@ function handleRemove(file, files) {
function handleUploadSuccess(res) { function handleUploadSuccess(res) {
uploadList.value.push({ name: res.data.fileName, url: res.data.url }) uploadList.value.push({ name: res.data.fileName, url: res.data.url })
if (uploadList.value.length === number.value) { if (uploadList.value.length === number.value) {
fileList.value = fileList.value.concat(uploadList.value) fileList.value = fileList.value.filter((f) => f.url !== undefined).concat(uploadList.value)
uploadList.value = [] uploadList.value = []
number.value = 0 number.value = 0
emit('update:modelValue', listToString(fileList.value)) emit('update:modelValue', listToString(fileList.value))
// emit('success', listToString(fileList.value))
proxy.$modal.closeLoading() proxy.$modal.closeLoading()
} }
} }