|
|
@@ -31,8 +31,11 @@
|
|
|
<el-upload
|
|
|
ref="uploadRef"
|
|
|
:auto-upload="false"
|
|
|
- :limit="1"
|
|
|
+ :limit="20"
|
|
|
+ multiple
|
|
|
+ :accept="fileAccept"
|
|
|
:on-change="handleFileChange"
|
|
|
+ :on-remove="handleFileRemove"
|
|
|
:on-exceed="handleExceed"
|
|
|
:file-list="uploadFileList"
|
|
|
drag>
|
|
|
@@ -42,7 +45,7 @@
|
|
|
</div>
|
|
|
<template #tip>
|
|
|
<div class="el-upload__tip">
|
|
|
- 支持各种文件格式,建议文件大小不超过100MB
|
|
|
+ {{ uploadForm.fileType === 'image' ? '支持 jpg/png/gif/webp 格式图片' : '支持 mp4/mov/avi 格式视频' }},最多20个文件,单个文件建议不超过100MB
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-upload>
|
|
|
@@ -199,11 +202,21 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { ref, reactive, onMounted } from 'vue'
|
|
|
+import { ref, reactive, computed, onMounted } from 'vue'
|
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
|
import { UploadFilled } from '@element-plus/icons-vue'
|
|
|
import { uploadFile, getFileList, deleteFile, batchDeleteFiles } from '@/api/ossFile'
|
|
|
|
|
|
+// 上传表单
|
|
|
+const uploadFormRef = ref(null)
|
|
|
+const uploadRef = ref(null)
|
|
|
+const uploadForm = reactive({
|
|
|
+ businessType: 1,
|
|
|
+ fileType: 'image',
|
|
|
+ folder: 'images/',
|
|
|
+ files: []
|
|
|
+})
|
|
|
+
|
|
|
const handleBusinessTypeChange = (value) => {
|
|
|
uploadForm.businessType = value
|
|
|
// 品牌形象只能选图片
|
|
|
@@ -211,6 +224,8 @@ const handleBusinessTypeChange = (value) => {
|
|
|
uploadForm.fileType = 'image'
|
|
|
uploadForm.folder = 'images/'
|
|
|
}
|
|
|
+ // 切换业务类型时清空已选文件
|
|
|
+ clearSelectedFiles()
|
|
|
}
|
|
|
|
|
|
const handleFileTypeChange = (value) => {
|
|
|
@@ -220,16 +235,16 @@ const handleFileTypeChange = (value) => {
|
|
|
} else if (value === 'video') {
|
|
|
uploadForm.folder = 'videos/'
|
|
|
}
|
|
|
+ // 切换文件类型时清空已选文件
|
|
|
+ clearSelectedFiles()
|
|
|
+}
|
|
|
+
|
|
|
+// 清空已选文件
|
|
|
+const clearSelectedFiles = () => {
|
|
|
+ uploadRef.value?.clearFiles()
|
|
|
+ uploadFileList.value = []
|
|
|
+ uploadForm.files = []
|
|
|
}
|
|
|
-// 上传表单
|
|
|
-const uploadFormRef = ref(null)
|
|
|
-const uploadRef = ref(null)
|
|
|
-const uploadForm = reactive({
|
|
|
- businessType: 1,
|
|
|
- fileType: 'image',
|
|
|
- folder: 'images/',
|
|
|
- file: null
|
|
|
-})
|
|
|
|
|
|
const uploadRules = {
|
|
|
businessType: [{ required: true, message: '请选择业务分类', trigger: 'change' }],
|
|
|
@@ -240,6 +255,16 @@ const uploadRules = {
|
|
|
const uploadFileList = ref([])
|
|
|
const uploading = ref(false)
|
|
|
|
|
|
+// 根据文件类型计算接受的文件格式
|
|
|
+const fileAccept = computed(() => {
|
|
|
+ if (uploadForm.fileType === 'image') {
|
|
|
+ return 'image/jpeg,image/png,image/gif,image/webp'
|
|
|
+ } else if (uploadForm.fileType === 'video') {
|
|
|
+ return 'video/mp4,video/quicktime,video/x-msvideo'
|
|
|
+ }
|
|
|
+ return ''
|
|
|
+})
|
|
|
+
|
|
|
// 查询表单
|
|
|
const queryForm = reactive({
|
|
|
businessType: null,
|
|
|
@@ -264,13 +289,17 @@ const previewVisible = ref(false)
|
|
|
const previewUrl = ref('')
|
|
|
|
|
|
// 文件选择
|
|
|
-const handleFileChange = (file) => {
|
|
|
- uploadForm.file = file.raw
|
|
|
- uploadFileList.value = [file]
|
|
|
+const handleFileChange = (file, fileList) => {
|
|
|
+ uploadForm.files = fileList.map(f => f.raw)
|
|
|
+}
|
|
|
+
|
|
|
+// 文件移除
|
|
|
+const handleFileRemove = (file, fileList) => {
|
|
|
+ uploadForm.files = fileList.map(f => f.raw)
|
|
|
}
|
|
|
|
|
|
const handleExceed = () => {
|
|
|
- ElMessage.warning('只能上传一个文件')
|
|
|
+ ElMessage.warning('最多只能上传20个文件')
|
|
|
}
|
|
|
|
|
|
// 提交上传
|
|
|
@@ -280,32 +309,47 @@ const submitUpload = async () => {
|
|
|
await uploadFormRef.value.validate(async (valid) => {
|
|
|
if (!valid) return
|
|
|
|
|
|
- if (!uploadForm.file) {
|
|
|
+ if (!uploadForm.files || uploadForm.files.length === 0) {
|
|
|
ElMessage.warning('请选择文件')
|
|
|
return
|
|
|
}
|
|
|
|
|
|
uploading.value = true
|
|
|
- const formData = new FormData()
|
|
|
- formData.append('file', uploadForm.file)
|
|
|
- formData.append('folder', uploadForm.folder)
|
|
|
- formData.append('fileType', uploadForm.fileType)
|
|
|
- formData.append('businessType', uploadForm.businessType)
|
|
|
-
|
|
|
- try {
|
|
|
- const res = await uploadFile(formData)
|
|
|
- if (res.success) {
|
|
|
- ElMessage.success('文件上传成功')
|
|
|
- resetForm()
|
|
|
- loadFileList()
|
|
|
- } else {
|
|
|
- ElMessage.error(res.message || '上传失败')
|
|
|
+ let successCount = 0
|
|
|
+ let failCount = 0
|
|
|
+
|
|
|
+ for (const file of uploadForm.files) {
|
|
|
+ const formData = new FormData()
|
|
|
+ formData.append('file', file)
|
|
|
+ formData.append('folder', uploadForm.folder)
|
|
|
+ formData.append('fileType', uploadForm.fileType)
|
|
|
+ formData.append('businessType', uploadForm.businessType)
|
|
|
+
|
|
|
+ try {
|
|
|
+ const res = await uploadFile(formData)
|
|
|
+ if (res.success) {
|
|
|
+ successCount++
|
|
|
+ } else {
|
|
|
+ failCount++
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('上传失败:', error)
|
|
|
+ failCount++
|
|
|
}
|
|
|
- } catch (error) {
|
|
|
- console.error('上传失败:', error)
|
|
|
- ElMessage.error('上传失败: ' + (error.message || '未知错误'))
|
|
|
- } finally {
|
|
|
- uploading.value = false
|
|
|
+ }
|
|
|
+
|
|
|
+ uploading.value = false
|
|
|
+
|
|
|
+ if (successCount > 0 && failCount === 0) {
|
|
|
+ ElMessage.success(`${successCount}个文件上传成功`)
|
|
|
+ resetForm()
|
|
|
+ loadFileList()
|
|
|
+ } else if (successCount > 0 && failCount > 0) {
|
|
|
+ ElMessage.warning(`上传完成:${successCount}个成功,${failCount}个失败`)
|
|
|
+ resetForm()
|
|
|
+ loadFileList()
|
|
|
+ } else {
|
|
|
+ ElMessage.error('所有文件上传失败')
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
@@ -315,7 +359,7 @@ const resetForm = () => {
|
|
|
uploadFormRef.value?.resetFields()
|
|
|
uploadRef.value?.clearFiles()
|
|
|
uploadFileList.value = []
|
|
|
- uploadForm.file = null
|
|
|
+ uploadForm.files = []
|
|
|
}
|
|
|
|
|
|
// 加载文件列表
|