<template>
<div class="clearfix">
{{ fileList }}
<a-upload
list-type="picture-card"
v-model:file-list="fileList"
@preview="handlePreview"
@change="handleChange"
:customRequest="customRequest"
>
<div v-if="fileList.length < 8">
<plus-outlined />
<div class="ant-upload-text">Upload</div>
</div>
</a-upload>
<!--
回填
-->
<a-modal
:visible="previewVisible"
:footer="null"
@cancel="handleCancel"
>
<img alt="example" style="width: 100%" :src="previewImage" />
</a-modal>
<button @click="showWrite">回填</button>
</div>
</template>
<script lang="ts">
import { PlusOutlined } from '@ant-design/icons-vue'
import { defineComponent, ref } from 'vue'
function getBase64(file: File) {
return new Promise((resolve, reject) => {
const reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = () => resolve(reader.result)
reader.onerror = error => reject(error)
})
}
export default defineComponent({
components: {
PlusOutlined,
},
setup() {
// 全屏预览状态
const previewVisible = ref<boolean>(false)
// 预览的照片
const previewImage = ref<string | undefined>('')
// 存放显示的图片数组集合
const fileList: any = ref([])
// 取消预览
const handleCancel = () => {
previewVisible.value = false
}
// 打开预览
const handlePreview = async file => {
if (!file.url && !file.preview) {
file.preview = (await getBase64(file.originFileObj)) as string
}
previewImage.value = file.url || file.preview
previewVisible.value = true
}
// customRequest 可以解决一个问题
function customRequest(mess) {
console.log(mess)
}
// 更改文件上传的的状态,将uploading状态更改为done完成状态哈
function handleChange(mess) {
mess.file.status = 'done'
}
// 模拟数据回填
function showWrite() {
fileList.value = [
{
// uid: '-1',
// name: 'image.png',
// status: 'done',
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
},
{
// uid: '-2',
// name: 'image.png',
// status: 'done',
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
},
]
}
return {
previewVisible,
previewImage,
fileList,
showWrite,
handleCancel,
handlePreview,
customRequest,
handleChange,
}
},
})
</script>
<style>
/* you can make up upload button and sample style by using stylesheets */
.ant-upload-select-picture-card i {
font-size: 32px;
color: #999;
}
.ant-upload-select-picture-card .ant-upload-text {
margin-top: 8px;
color: #666;
}
</style>