修改媒体供应商文件支持多选上传
This commit is contained in:
wangchengming
parent
a74e9ba7ea
commit
29245db42f
|
|
@ -13,6 +13,19 @@ export function uploadFile(data) {
|
|||
})
|
||||
}
|
||||
|
||||
// 上传文件 多个
|
||||
export function uploadFiles(data) {
|
||||
return request({
|
||||
url: '/common/uploadBatch',
|
||||
method: 'post',
|
||||
data: data,
|
||||
timeout: 600000, // 300秒 = 5分钟，根据文件大小调整
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 公用下载文件接口
|
||||
export function downFile(fileUrl) {
|
||||
return request({
|
||||
|
|
|
|||
|
|
@ -31,8 +31,8 @@
|
|||
</div>
|
||||
</div>
|
||||
<el-upload action="#" class="noFileCard" :http-request="requestUpload" list-type="picture-card"
|
||||
:file-list="cardfileList" :on-change="handleChange" :show-file-list="false" :accept="_accept"
|
||||
:before-upload="beforeUpload">
|
||||
:auto-upload="false" :file-list="cardfileList" :on-change="handleChange" :show-file-list="false"
|
||||
:accept="_accept" multiple :limit="10" :before-upload="beforeUpload">
|
||||
<el-icon class="avatar-uploader-icon">
|
||||
<Plus />
|
||||
</el-icon>
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
<script setup>
|
||||
import { defineExpose, ref } from 'vue'
|
||||
import { Plus, Delete } from '@element-plus/icons-vue'
|
||||
import { uploadFile } from "@/api/common"
|
||||
import { uploadFiles } from "@/api/common"
|
||||
import iconDoc from '@/assets/images/iconDoc.png'
|
||||
import iconOther from '@/assets/images/iconOther.png'
|
||||
import iconPdf from '@/assets/images/iconPdf.png'
|
||||
|
|
@ -70,7 +70,11 @@ const emit = defineEmits(['setFormFile'])
|
|||
|
||||
// 文件列表初始化
|
||||
const fileList = ref([])
|
||||
// 上传组件中的file列表
|
||||
const cardfileList = ref([])
|
||||
// 存储选中的文件
|
||||
const selectedFiles = ref([])
|
||||
const isUploading = ref(false) // 上传状态
|
||||
// 文件类型 1-营业执照 2-媒体权属 9-其它附件
|
||||
// 批文文件-1,独家授权文件-2,媒体行业授权文件-3,媒体归属附件-4,曾经媒体照片-5,图片上传-6,视频上传-7,盖章刊例-8, 资质文件-9, 媒体链条-10, 刊例照片-11,MR和制作要求-12
|
||||
const _fileType = ref('1')
|
||||
|
|
@ -81,18 +85,6 @@ const dialogVisible = ref(false)
|
|||
const suffix = ref('')
|
||||
|
||||
const setFileInfo = (files) => {
|
||||
// 处理无后缀名情况
|
||||
// if (!filePath || filePath.indexOf('.') === -1) {
|
||||
// fileList.value = []
|
||||
// return '';
|
||||
// }
|
||||
|
||||
// var suffix = filePath.split('.').pop();
|
||||
// fileList.value = [{
|
||||
// name: filePath,
|
||||
// url: baseUrl + filePath,
|
||||
// suffix: suffix
|
||||
// }]
|
||||
fileList.value = files
|
||||
}
|
||||
|
||||
|
|
@ -121,83 +113,110 @@ const handleRemoveImage = (itemFile) => {
|
|||
}
|
||||
}
|
||||
|
||||
// 自定义上传
|
||||
// 自定义上传 - 空实现，实际在 handleChange 中处理
|
||||
const requestUpload = async (options) => {
|
||||
const { file } = options
|
||||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
|
||||
try {
|
||||
proxy.$modal.loading('正在上传文件，请耐心等待...')
|
||||
const res = await uploadFile(formData)
|
||||
if (res.code === 200) {
|
||||
fileList.value.push({
|
||||
id: undefined,
|
||||
busSupplierId: undefined,
|
||||
fileType: _fileType,
|
||||
fileUrl: baseUrl + res.fileName,
|
||||
fileName: res.fileName,
|
||||
originalFileName: res.originalFilename,
|
||||
size: res.size,
|
||||
suffix: res.suffix
|
||||
})
|
||||
cardfileList.value = [{
|
||||
id: undefined,
|
||||
busSupplierId: undefined,
|
||||
fileType: _fileType,
|
||||
fileUrl: baseUrl + res.fileName,
|
||||
fileName: res.fileName,
|
||||
originalFileName: res.originalFilename,
|
||||
size: res.size,
|
||||
suffix: res.suffix
|
||||
}]
|
||||
proxy.$modal.closeLoading()
|
||||
emit('setFormFile', _fileType.value, fileList.value)
|
||||
}
|
||||
} catch (error) {
|
||||
proxy.$modal.closeLoading()
|
||||
proxy.$modal.msgError("上传失败")
|
||||
console.error('上传失败:', error)
|
||||
}
|
||||
// 这个方法现在不做实际工作，批量上传在 handleChange 中处理
|
||||
return false
|
||||
}
|
||||
|
||||
// 文件类型校验
|
||||
const beforeUpload = (file) => {
|
||||
if (_accept.value == '*/*') return true
|
||||
// const validTypes = [
|
||||
// // 图片类型
|
||||
// "image/jpeg",
|
||||
// "image/jpg",
|
||||
// "image/png",
|
||||
// // PDF 类型
|
||||
// "application/pdf",
|
||||
// "application/x-pdf",
|
||||
// "application/acrobat",
|
||||
// "applications/vnd.pdf",
|
||||
// "text/pdf",
|
||||
// "text/x-pdf"]
|
||||
const isValidType = validTypes.includes(file.type)
|
||||
// // const isLt5M = file.size / 1024 / 1024 < 5
|
||||
|
||||
if (!isValidType) {
|
||||
proxy.$modal.msgError("文件格式错误，请上传 " + _accept.value + " 后缀的文件。");
|
||||
return false
|
||||
}
|
||||
|
||||
// if (!isLt5M) {
|
||||
// proxy.$modal.msgError("文件大小不能超过5MB");
|
||||
// return false
|
||||
// }
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
// 文件变化处理
|
||||
const handleChange = (file, files) => {
|
||||
// 可以在这里添加文件变化时的额外处理逻辑
|
||||
// 不需要清空 fileList，因为上传逻辑会处理
|
||||
cardfileList.value = []
|
||||
// 文件变化处理 - 改造为自动批量上传
|
||||
const handleChange = async (file, files) => {
|
||||
// 更新选中的文件列表
|
||||
selectedFiles.value = files.map(item => item.raw || item)
|
||||
console.log('选择的文件', selectedFiles.value)
|
||||
// 使用 nextTick 确保文件选择完成后再上传
|
||||
await nextTick()
|
||||
|
||||
// 自动触发批量上传
|
||||
if (selectedFiles.value.length > 0 && !isUploading.value) {
|
||||
await handleBatchUpload()
|
||||
}
|
||||
}
|
||||
// 批量上传方法
|
||||
const handleBatchUpload = async () => {
|
||||
if (selectedFiles.value.length === 0 || isUploading.value) {
|
||||
return
|
||||
}
|
||||
|
||||
isUploading.value = true
|
||||
proxy.$modal.loading(`正在上传 ${selectedFiles.value.length} 个文件，请耐心等待...`)
|
||||
|
||||
try {
|
||||
const formData = new FormData()
|
||||
|
||||
// 添加所有文件到 FormData
|
||||
selectedFiles.value.forEach((file, index) => {
|
||||
formData.append('files', file)
|
||||
})
|
||||
|
||||
console.log('提交参数', formData)
|
||||
|
||||
const res = await uploadFiles(formData)
|
||||
|
||||
if (res.code === 200) {
|
||||
// 处理返回的文件数据
|
||||
if (res.data && Array.isArray(res.data)) {
|
||||
// 假设后端返回的是文件数组
|
||||
res.data.forEach(fileInfo => {
|
||||
fileList.value.push({
|
||||
id: undefined,
|
||||
busSupplierId: undefined,
|
||||
fileType: _fileType.value,
|
||||
fileUrl: baseUrl + fileInfo.fileName,
|
||||
fileName: fileInfo.fileName,
|
||||
originalFileName: fileInfo.originalFilename,
|
||||
size: fileInfo.size,
|
||||
suffix: fileInfo.suffix
|
||||
})
|
||||
cardfileList.value = [{
|
||||
id: undefined,
|
||||
busSupplierId: undefined,
|
||||
fileType: _fileType,
|
||||
fileUrl: baseUrl + fileInfo.fileName,
|
||||
fileName: fileInfo.fileName,
|
||||
originalFileName: fileInfo.originalFilename,
|
||||
size: fileInfo.size,
|
||||
suffix: fileInfo.suffix
|
||||
}]
|
||||
})
|
||||
}
|
||||
proxy.$modal.closeLoading()
|
||||
proxy.$modal.msgSuccess(`成功上传 ${selectedFiles.value.length} 个文件`)
|
||||
|
||||
// 清空已选文件和 cardfileList
|
||||
selectedFiles.value = []
|
||||
cardfileList.value = []
|
||||
|
||||
emit('setFormFile', _fileType.value, fileList.value)
|
||||
} else {
|
||||
proxy.$modal.msgError(res.message || '上传失败')
|
||||
}
|
||||
} catch (error) {
|
||||
proxy.$modal.closeLoading()
|
||||
proxy.$modal.msgError("上传失败: " + (error.message || '未知错误'))
|
||||
console.error('批量上传失败:', error)
|
||||
|
||||
// 上传失败时清空选中的文件
|
||||
selectedFiles.value = []
|
||||
cardfileList.value = []
|
||||
} finally {
|
||||
isUploading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 暴露方法给父组件
|
||||
defineExpose({
|
||||
setFileInfo,
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user