<template>
	<div :class="['enter-text' ,'description']" >
		<div></div>
		<div class="select-opation">
			<a-upload accept="image/*" list-type="picture" v-model:file-list="fileList" class="upload-list-inline">
				<img width="20" :src="uploadImg" />
			</a-upload>
		</div>
		<div class="enter-content">
			<div>
				<a-textarea ref="textareaes" :auto-size="{ minRows: 1, maxRows: 7 }" v-html="content" placeholder="在此输入内容"  />
				<div class="file-list">
					<div class="file" v-for="(item, index) in fileList">
						<img :src="item.thumbUrl" @click="showImg(item)" />
						<div class="close-box" @click="delUploadImg(index)">
							<img width="8" class="close-img" :src="close" />
						</div>
					</div>
				</div>
			</div>
			<a-button type="primary" class="button" >修改</a-button>
		</div>
		<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
			<img alt="example" style="width: 100%" :src="previewImage" />
		</a-modal>
	</div>
</template>

<script setup>
import { onMounted, reactive, watch, ref, nextTick } from 'vue'
import uploadImg from '/@assets/wordlive/upload-img.png'
import close from '/@assets/wordlive/close.png'
const getBase64 = (file) => {
	return new Promise((resolve, reject) => {
		const reader = new FileReader()
		reader.readAsDataURL(file)
		reader.onload = () => resolve(reader.result)
		reader.onerror = (error) => reject(error)
	})
}
const previewVisible = ref(false)
const previewImage = ref('')
const fileList = ref([])
const handleCancel = () => {
	previewVisible.value = false
}

//放大图片
const showImg = async (file) => {
	// console.log(file) ===> 是个proxy 对象 ，可以用 JSON.parse(JSON.stringify(file)) 转换，
	// 也可以用 异步getBase64(file.originFileObj)获取图片的地址
	// 具体如下图
	let newFile = JSON.parse(JSON.stringify(file))
	let data = await getBase64(file.originFileObj)
	console.log(data, 'data', file, 'file', newFile, 'newFile')
	previewImage.value = data
	previewVisible.value = true
}
//删除图片
const delUploadImg = (index) => {
	fileList.value.splice(index, 1)
}
</script>
<style lang="less" scoped>
@deep: ~':deep()';

@{deep}.ant-upload-list {
	display: none;
}

</style>

效果：

注意：本文摘自vue3 + vite2 框架项目