<template>
<div class="news-images">
<div v-for="(img, idx) in images" :key="idx" class="news-img-wrap">
<!-- 上传进度显示 -->
<div v-if="img.status === '
uploading'" class="progress-overlay">
<van-circle
v-model:current-rate="img.progress"
:rate="100"
:speed="10"
size="120rem"
:stroke-width="20"
stroke-linecap="round"
class="progress"
>
<span class="progress-text">{{ img.progress }}%</span>
</van-circle>
</div>
<!-- 错误状态显示 -->
<div v-if="img.status === 'error'" class="error-overlay">
<van-icon name="warning" size="32rem" color="#ff4444" />
<span>上传失败</span>
<van-button type="primary" size="small" @click="reUpload(idx)" style="margin-top: 16rem">重新上传</van-button>
</div>
<img :src="img.url" class="news-img" />
<div class="img-cl
ose" @click="removeImg(idx)">
<van-icon name="cr
oss" size="32rem" color="#fff" />
</div>
</div>
<div v-if="images.length < maxCount" class="news-img-add" @click="onAddImg">
<van-icon name="plus" size="64rem" color="#bbb" />
</div>
<!-- 隐藏的文件选择器 -->
<input ref="fileInput" type="file" multiple accept="image/*" style="display: none" @change="handleFileChange" />
</div>
</template>
<script setup lang="ts">
import { apis } from '@/api'
import System from '@/utils/System'
import { showToast } from 'vant'
import { ref, onUnmounted } from 'vue'
const emit = defineEmits(['update:modelValue'])
const props = defineProps({
autoUpload: {
type: Boolean,
default: true
},
maxCount: {
type: Number,
default: 9
},
modelValue: {
type: Array as () => imgageItem[],
default: () => []
}
})
interface imgageItem {
url: string
progress: number
status: 'pending' | '
uploading' | 'success' | 'error'
file?: File
}
const fileInput = ref<HTMLInputElement | null>(null)
const images = ref<imgageItem[]>(props.modelValue)
const onAddImg = () => {
fileInput.value?.click()
}
const removeImg = async (idx: number) => {
images.value.splice(idx, 1)
emit('update:modelValue', [...images.value])
}
// const handleFileChange = async (e: Event) => {
// const target = e.target as HTMLInputElement
// const files = target.files
// if (!files || files.length === 0) return
// for (const file of Array.from(files)) {
// if (images.value.length >= props.maxCount) break
// try {
// const reader = new FileReader()
// console.log("🚀 ~ handleFileChange ~ reader:", reader)
// reader.onload = (ev) => {
// if (typeof ev.target?.result === 'string') {
// const index = images.value.length
// images.value.push({
// url: ev.target.result, // 临时预览URL
// progress: 0,
// status: 'pending',
// file: file
// })
// console.log("🚀 ~ handleFileChange ~ images.value:", images.value)
// if (props.autoUpload) {
// uploadFile(file, index)
// }
// reader.readAsDataURL(file)
// }
// }
// // 清空 input
// ;(e.target as HTMLInputElement).value = ''
// // 更新父组件
// emit('update:modelValue', [...images.value])
// } catch (error) {
// System.toast('图片处理失败')
// console.error('文件处理错误:', error)
// }
// }
// // 清空文件选择器
// ;(e.target as HTMLInputElement).value = ''
// }
const handleFileChange = (e: Event) => {
const files = (e.target as HTMLInputElement).files
if (files && files.length > 0) {
Array.from(files).forEach((file) => {
if (images.value.length >= 6) return
const reader = new FileReader()
reader.onload = (ev) => {
if (typeof ev.target?.result === 'string') {
const index = images.value.length
images.value.push({
url: ev.target.result, // 临时预览URL
progress: 0,
status: 'pending',
file: file
})
// 开始上传
if (props.autoUpload) {
uploadFile(file, index)
}
}
}
reader.readAsDataURL(file)
})
emit('update:modelValue', [...images.value])
// 清空 input
;(e.target as HTMLInputElement).value = ''
}
}
const uploadFile = async (file: File, index: number) => {
// try {
images.value[index].status = '
uploading'
// 调用API上传
const formData = new FormData()
formData.append("file",file)
const res: any = await apis.uploadFile({ file: formData.get('file') }, (progressEvent: { loaded: number; total: number }) => {
if (progressEvent.total > 0) {
images.value[index].progress = Math.round((progressEvent.loaded / progressEvent.total) * 100)
}
})
if (res.code === 200) {
images.value[index].status = 'success'
images.value[index].url = res.data
} else {
images.value[index].status = 'error'
System.toast('图片上传失败')
}
emit('update:modelValue', [...images.value])
// } catch (error) {
// images.value[index].status = 'error'
// System.toast('图片上传失败')
// console.error('上传错误:', error)
// emit('update:modelValue', [...images.value])
// }
}
// 自动上传全部待上传图片
const autoUploadAll = () => {
images.value.forEach((img, index) => {
if (img.status === 'pending' && img.file) {
uploadFile(img.file, index)
}
})
}
// 重新上传指定失败图片
const reUpload = (index: number) => {
if (images.value[index].status !== 'error' || !images.value[index].file) return
images.value[index].status = 'pending'
uploadFile(images.value[index].file!, index)
}
// 组件卸载时清理临时文件
onUnmounted(async () => {})
defineExp
ose({ autoUploadAll, reUpload })
</script>
<style lang="less" scoped>
.news-images {
display: flex;
flex-wrap: wrap;
gap: 18.5rem;
margin-bottom: 48rem;
.news-img-wrap {
p
osition: relative;
width: 216rem;
height: 216rem;
border-radius: 23rem;
overflow: hidden;
margin-bottom: 32rem; // 新增，保证多行间距
.progress-overlay {
p
osition: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
.progress {
display: flex;
align-items: center;
justify-content: center;
}
.progress-text {
color: #fff;
font-size: 24rem;
}
}
.error-overlay {
p
osition: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 2;
span {
color: #fff;
font-size: 24rem;
margin-top: 8rem;
}
}
.news-img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 24rem;
}
.img-cl
ose {
p
osition: absolute;
top: 8rem;
right: 8rem;
background: rgba(0, 0, 0, 0.4);
border-radius: 50%;
width: 40rem;
height: 40rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 3;
}
}
.news-img-add {
width: 216rem;
height: 216rem;
background: #f6f6f6;
border-radius: 23rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin-bottom: 32rem; // 保持添加按钮与图片对齐
.van-icon {
font-weight: bold;
}
}
}
</style>
这个代码帮我解决
扫一扫
818
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
