上传图片文件a-upload
html部分
<div className="clearfix">
<a-upload
:custom-request="customRequest"
listType="picture-card"
:fileList="fileList"
:onPreview="handlePreview"
:on-remove="del"
>
<div>
<plus-outlined/>
<div className="ant-upload-text">Upload</div>
</div>
</a-upload>
<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
<img alt="" style="width: 100%" :src="previewImage"/>
</a-modal>
</div>
js部分
// 是否预览
const previewVisible = ref(false)
// 图片url
const previewImage = ref('')
// 图片集合
const fileList = ref([])
// 图片id
const currentfileId = ref()
const handleCancel = () => {
console.log("关闭预览图")
previewVisible.value = false
}
const handlePreview = (file) => {
console.log("预览操作")
previewImage.value = file.url || file.thumbUrl
previewVisible.value = true
}
const customRequest = async ({
action,
data,
file,
filename,
headers,
onError,
onProgress,
onSuccess,
withCredentials
}) => {
const formData = new FormData()
formData.append('file', file)
const fileId = await fileApi.fileUploadDynamicReturnId(formData)
emit('uploadDone', fileId)
onSuccess({
data: fileId}, file)
// 加入到显示集合,此处直接赋值,因为我设置的只能有一张图,fileList为数组[],file为对象{}
fileList.value = [file]
currentfileId.value = fileId
}
const del = (file) => {
fileApi.fileDelete([{
id: currentfileId.value }]).then((res) => {
// 同时清空 fileList
fileList.value = []
currentfileId.value = ''
})
}
css部分
.ant-upload-select-picture-card i {
font-size: 28px;
color: #999;
}
.ant-upload-select-picture-card .ant-upload-text {
margin-top: 8px;
font-size: 12px;
color: #666;
}
效果图:
参考
以上是参考官方文档antd(2.13.11),该组件文档如下:
import {
Upload, Icon, Modal } from 'antd';
class PicturesWall extends React.Component {
state = {
previewVisible: false,
previewImage: '',
f