|
@@ -46,6 +46,7 @@ type Props = {
|
|
|
isUpName?: boolean //是否能修改图片名字
|
|
isUpName?: boolean //是否能修改图片名字
|
|
|
lastImgTxt?: string //加载最后面的上传提示
|
|
lastImgTxt?: string //加载最后面的上传提示
|
|
|
oneIsCover?: boolean //是否将第一张作为封面
|
|
oneIsCover?: boolean //是否将第一张作为封面
|
|
|
|
|
+ multipleImg?: boolean // 新增参数:是否支持多张图片同时上传
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
function ZupTypes(
|
|
function ZupTypes(
|
|
@@ -64,7 +65,8 @@ function ZupTypes(
|
|
|
isTypeShow = false,
|
|
isTypeShow = false,
|
|
|
isUpName = false,
|
|
isUpName = false,
|
|
|
lastImgTxt = '',
|
|
lastImgTxt = '',
|
|
|
- oneIsCover = false
|
|
|
|
|
|
|
+ oneIsCover = false,
|
|
|
|
|
+ multipleImg = false
|
|
|
}: Props,
|
|
}: Props,
|
|
|
ref: any
|
|
ref: any
|
|
|
) {
|
|
) {
|
|
@@ -127,10 +129,24 @@ function ZupTypes(
|
|
|
// 上传附件的处理函数
|
|
// 上传附件的处理函数
|
|
|
const handeUpPhoto2 = useCallback(
|
|
const handeUpPhoto2 = useCallback(
|
|
|
async (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
async (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
|
- if (e.target.files) {
|
|
|
|
|
- // 拿到files信息
|
|
|
|
|
- const filesInfo = e.target.files[0]
|
|
|
|
|
|
|
+ if (!e.target.files || e.target.files.length === 0) return
|
|
|
|
|
+
|
|
|
|
|
+ // 新增:多选模式下获取所有文件 [2,6](@ref)
|
|
|
|
|
+ let files =
|
|
|
|
|
+ multipleImg && fileOneType === 'img' ? Array.from(e.target.files) : [e.target.files[0]]
|
|
|
|
|
+
|
|
|
|
|
+ // 新增:检查图片数量限制 [4](@ref)
|
|
|
|
|
+ if (fileOneType === 'img' && multipleImg) {
|
|
|
|
|
+ const remainingSlots = imgLength - fileList.img.length
|
|
|
|
|
+ if (files.length > remainingSlots) {
|
|
|
|
|
+ MessageFu.warning(`最多还能上传${remainingSlots}张图片`)
|
|
|
|
|
+ files = files.slice(0, remainingSlots)
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
|
|
+ // 批量处理文件 [4](@ref)
|
|
|
|
|
+ for (const file of files) {
|
|
|
|
|
+ // 原有的校验逻辑(格式、大小等)保持不变...
|
|
|
let anType = ['image/jpeg', 'image/png']
|
|
let anType = ['image/jpeg', 'image/png']
|
|
|
let anTit1 = '只支持png、jpg格式!'
|
|
let anTit1 = '只支持png、jpg格式!'
|
|
|
let anTit2 = `最大支持${imgSize}M!`
|
|
let anTit2 = `最大支持${imgSize}M!`
|
|
@@ -155,62 +171,78 @@ function ZupTypes(
|
|
|
|
|
|
|
|
// 校验格式
|
|
// 校验格式
|
|
|
if (fileOneType !== 'model') {
|
|
if (fileOneType !== 'model') {
|
|
|
- if (!anType.includes(filesInfo.type)) {
|
|
|
|
|
|
|
+ if (!anType.includes(file.type)) {
|
|
|
e.target.value = ''
|
|
e.target.value = ''
|
|
|
return MessageFu.warning(anTit1)
|
|
return MessageFu.warning(anTit1)
|
|
|
}
|
|
}
|
|
|
} else {
|
|
} else {
|
|
|
- if (!filesInfo.name.includes('.4dage')) {
|
|
|
|
|
|
|
+ if (!file.name.includes('.4dage')) {
|
|
|
e.target.value = ''
|
|
e.target.value = ''
|
|
|
return MessageFu.warning(anTit1)
|
|
return MessageFu.warning(anTit1)
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// 校验大小
|
|
// 校验大小
|
|
|
- if (filesInfo.size > anSize) {
|
|
|
|
|
|
|
+ if (file.size > anSize) {
|
|
|
e.target.value = ''
|
|
e.target.value = ''
|
|
|
return MessageFu.warning(anTit2)
|
|
return MessageFu.warning(anTit2)
|
|
|
}
|
|
}
|
|
|
- // 创建FormData对象
|
|
|
|
|
|
|
+ // 创建FormData
|
|
|
const fd = new FormData()
|
|
const fd = new FormData()
|
|
|
- // 把files添加进FormData对象(‘photo’为后端需要的字段)
|
|
|
|
|
fd.append('type', fileOneType)
|
|
fd.append('type', fileOneType)
|
|
|
fd.append('dirCode', dirCode)
|
|
fd.append('dirCode', dirCode)
|
|
|
fd.append('isDb', 'true')
|
|
fd.append('isDb', 'true')
|
|
|
-
|
|
|
|
|
//初始图片 fileName为:未命名
|
|
//初始图片 fileName为:未命名
|
|
|
if (isUpName) {
|
|
if (isUpName) {
|
|
|
fd.append('isDefaultName', 'false')
|
|
fd.append('isDefaultName', 'false')
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- fd.append('file', filesInfo)
|
|
|
|
|
|
|
+ fd.append('file', file)
|
|
|
|
|
|
|
|
- if (fileOneType === 'img' && filesInfo.size > 1 * 1024 * 1024) {
|
|
|
|
|
|
|
+ if (fileOneType === 'img' && file.size > 1 * 1024 * 1024) {
|
|
|
// 开启压缩图片
|
|
// 开启压缩图片
|
|
|
fd.append('isCompress', 'true')
|
|
fd.append('isCompress', 'true')
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
e.target.value = ''
|
|
e.target.value = ''
|
|
|
|
|
|
|
|
- const res = await API_upFile(fd, myUrl)
|
|
|
|
|
-
|
|
|
|
|
try {
|
|
try {
|
|
|
|
|
+ const res = await API_upFile(fd, myUrl)
|
|
|
if (res.code === 0) {
|
|
if (res.code === 0) {
|
|
|
- MessageFu.success('上传成功!')
|
|
|
|
|
- if (fileOneType === 'img')
|
|
|
|
|
- setFileList({
|
|
|
|
|
- ...fileList,
|
|
|
|
|
- img: [...fileList.img, { ...res.data, imgName: '未命名' }]
|
|
|
|
|
- })
|
|
|
|
|
- else setFileList({ ...fileList, [fileOneType]: res.data })
|
|
|
|
|
|
|
+ MessageFu.success(
|
|
|
|
|
+ `上传成功${files.length > 1 ? `(${files.indexOf(file) + 1}/${files.length})` : ''}`
|
|
|
|
|
+ )
|
|
|
|
|
+
|
|
|
|
|
+ // 更新状态
|
|
|
|
|
+ if (fileOneType === 'img') {
|
|
|
|
|
+ setFileList(prev => ({
|
|
|
|
|
+ ...prev,
|
|
|
|
|
+ img: [...prev.img, { ...res.data, imgName: '未命名' }]
|
|
|
|
|
+ }))
|
|
|
|
|
+ } else {
|
|
|
|
|
+ setFileList(prev => ({ ...prev, [fileOneType]: res.data }))
|
|
|
|
|
+ }
|
|
|
|
|
+ fileDomInitialFu()
|
|
|
}
|
|
}
|
|
|
- fileDomInitialFu()
|
|
|
|
|
} catch (error) {
|
|
} catch (error) {
|
|
|
|
|
+ // 错误处理
|
|
|
fileDomInitialFu()
|
|
fileDomInitialFu()
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
- [audioSize, dirCode, fileList, fileOneType, imgSize, isUpName, modelSize, myUrl, videoSize]
|
|
|
|
|
|
|
+ [
|
|
|
|
|
+ audioSize,
|
|
|
|
|
+ dirCode,
|
|
|
|
|
+ fileList.img.length,
|
|
|
|
|
+ fileOneType,
|
|
|
|
|
+ imgLength,
|
|
|
|
|
+ imgSize,
|
|
|
|
|
+ isUpName,
|
|
|
|
|
+ modelSize,
|
|
|
|
|
+ multipleImg,
|
|
|
|
|
+ myUrl,
|
|
|
|
|
+ videoSize
|
|
|
|
|
+ ]
|
|
|
)
|
|
)
|
|
|
|
|
|
|
|
// 附件图片的拖动
|
|
// 附件图片的拖动
|
|
@@ -436,6 +468,7 @@ function ZupTypes(
|
|
|
}
|
|
}
|
|
|
ref={myInput}
|
|
ref={myInput}
|
|
|
onChange={e => handeUpPhoto2(e)}
|
|
onChange={e => handeUpPhoto2(e)}
|
|
|
|
|
+ multiple={fileOneType === 'img' && multipleImg}
|
|
|
/>
|
|
/>
|
|
|
<div hidden={isTypeShow}>
|
|
<div hidden={isTypeShow}>
|
|
|
<Checkbox.Group
|
|
<Checkbox.Group
|
|
@@ -526,7 +559,7 @@ function ZupTypes(
|
|
|
</>
|
|
</>
|
|
|
) : null}
|
|
) : null}
|
|
|
{oneIsCover ? '第一张为封面图;' : ''} 支持png、jpg的图片格式;最大支持{imgSize}
|
|
{oneIsCover ? '第一张为封面图;' : ''} 支持png、jpg的图片格式;最大支持{imgSize}
|
|
|
- M;最多支持{imgLength}张。
|
|
|
|
|
|
|
+ M;最多支持{imgLength}张。{multipleImg ? '按住Ctrl可一次性选择多张图片上传' : ''}
|
|
|
{lastImgTxt}
|
|
{lastImgTxt}
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|