<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-close" @click="removeImg(idx)">
<van-icon name="cross" 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 () => {})
defineExpose({ autoUploadAll, reUpload })
</script>
<style lang="less" scoped>
.news-images {
display
: flex;
flex-wrap
: wrap;
gap
: 18.5rem;
margin-bottom
: 48rem;
.news-img-wrap {
position
: relative;
width
: 216rem;
height
: 216rem;
border-radius
: 23rem;
overflow
: hidden;
margin-bottom
: 32rem; // 新增，保证多行间距
.progress-overlay {
position
: 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 {
position
: 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-close {
position
: 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>
这个代码帮我解决
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
