<template>
<div class
="news-images">
<div v-for
="(img, idx) in images"
:key
="idx" class
="news-img-wrap">
<!-- 上传进度显示 -->
<div v-if
="img
.status
=== &
#39;uploading&
#39;" 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
=== &
#39;
error&
#39;" 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 &
#39;@/api&
#39;
import System from &
#39;@/utils/System&
#39;
import { showToast } from &
#39;vant&
#39;
import { ref, onUnmounted } from &
#39;vue&
#39;
const emit
= defineEmits([&
#39;update
:modelValue&
#39;])
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
: &
#39;pending&
#39; | &
#39;uploading&
#39; | &
#39;success&
#39; | &
#39;
error&
#39;
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(&
#39;update
:modelValue&
#39;, [
...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
=== &
#39;string&
#39;) {
// const index
= images
.value
.length
// images
.value
.push({
// url
: ev
.target
.result, // 临时预览URL
// progress
: 0,
// status
: &
#39;pending&
#39;,
// file
: file
// })
// console
.log("🚀 ~ handleFileChange ~ images
.value
:", images
.value)
// if (props
.autoUpload) {
// uploadFile(file, index)
// }
// reader
.readAsDataURL(file)
// }
// }
// // 清空 input
// ;(e
.target as HTMLInputElement)
.value
= &
#39;&
#39;
// // 更新父组件
// emit(&
#39;update
:modelValue&
#39;, [
...images
.value])
// } catch (
error) {
// System
.toast(&
#39;图片处理失败&
#39;)
// console
.error(&
#39;文件处理
错误:&
#39;,
error)
// }
// }
// // 清空文件选择器
// ;(e
.target as HTMLInputElement)
.value
= &
#39;&
#39;
// }
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
=== &
#39;string&
#39;) {
const index
= images
.value
.length
images
.value
.push({
url
: ev
.target
.result, // 临时预览URL
progress
: 0,
status
: &
#39;pending&
#39;,
file
: file
})
// 开始上传
if (props
.autoUpload) {
uploadFile(file, index)
}
}
}
reader
.readAsDataURL(file)
})
emit(&
#39;update
:modelValue&
#39;, [
...images
.value])
// 清空 input
;(e
.target as HTMLInputElement)
.value
= &
#39;&
#39;
}
}
const uploadFile
= async (file
: File, index
: number)
=> {
// try {
images
.value[index]
.status
= &
#39;uploading&
#39;
// 调用API上传
const formData
= new FormData()
formData
.append("file",file)
const res
: any
= await apis
.uploadFile({ file
: formData
.get(&
#39;file&
#39;) }, (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
= &
#39;success&
#39;
images
.value[index]
.url
= res
.data
} else {
images
.value[index]
.status
= &
#39;
error&
#39;
System
.toast(&
#39;图片上传失败&
#39;)
}
emit(&
#39;update
:modelValue&
#39;, [
...images
.value])
// } catch (
error) {
// images
.value[index]
.status
= &
#39;
error&
#39;
// System
.toast(&
#39;图片上传失败&
#39;)
// console
.error(&
#39;上传
错误:&
#39;,
error)
// emit(&
#39;update
:modelValue&
#39;, [
...images
.value])
// }
}
// 自动上传全部待上传图片
const autoUploadAll
= ()
=> {
images
.value
.forEach((img, index)
=> {
if (img
.status
=== &
#39;pending&
#39; && img
.file) {
uploadFile(img
.file, index)
}
})
}
// 重新上传指定失败图片
const reUpload
= (index
: number)
=> {
if (images
.value[index]
.status !
== &
#39;
error&
#39; || !images
.value[index]
.file) return
images
.value[index]
.status
= &
#39;pending&
#39;
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>
这个代码帮我解决
本文介绍了解决Flash中出现的Error#2044及Error#3702的方法，通过在html-template的index.template.html文件中添加wmode参数设置为direct来解决3D上下文不可用的问题。
扫一扫
3293
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
