|
|
<docs>
|
|
|
---
|
|
|
order: 7.1
|
|
|
title:
|
|
|
zh-CN: 只上传 png 图片
|
|
|
en-US: Upload png file only
|
|
|
---
|
|
|
|
|
|
## zh-CN
|
|
|
|
|
|
`beforeUpload` 返回 `false` 或 `Promise.reject` 时，只用于拦截上传行为，不会阻止文件进入上传列表（[原因](https://github.com/ant-design/ant-design/issues/15561#issuecomment-475108235)）。如果需要阻止列表展现，可以通过返回 `Upload.LIST_IGNORE` 实现。
|
|
|
|
|
|
## en-US
|
|
|
|
|
|
`beforeUpload` only prevent upload behavior when return false or reject promise, the prevented file would still show in file list. Here is the example you can keep prevented files out of list by return `UPLOAD.LIST_IGNORE`.
|
|
|
|
|
|
</docs>
|
|
|
|
|
|
<template>
|
|
|
<a-upload
|
|
|
v-model:file-list="fileList"
|
|
|
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
|
|
|
:before-upload="beforeUpload"
|
|
|
@change="handleChange"
|
|
|
>
|
|
|
<a-button>
|
|
|
<upload-outlined></upload-outlined>
|
|
|
Upload png only
|
|
|
</a-button>
|
|
|
</a-upload>
|
|
|
</template>
|
|
|
<script lang="ts" setup>
|
|
|
import { ref } from 'vue';
|
|
|
import { UploadOutlined } from '@ant-design/icons-vue';
|
|
|
import type { UploadChangeParam, UploadProps } from 'ant-design-vue';
|
|
|
import { message, Upload } from 'ant-design-vue';
|
|
|
const fileList = ref<UploadProps['fileList']>([
|
|
|
{
|
|
|
uid: '1',
|
|
|
name: 'xxx.png',
|
|
|
status: 'done',
|
|
|
response: 'Server Error 500', // custom error message to show
|
|
|
url: 'http://www.baidu.com/xxx.png',
|
|
|
},
|
|
|
{
|
|
|
uid: '2',
|
|
|
name: 'yyy.png',
|
|
|
status: 'done',
|
|
|
url: 'http://www.baidu.com/yyy.png',
|
|
|
},
|
|
|
{
|
|
|
uid: '3',
|
|
|
name: 'zzz.png',
|
|
|
status: 'error',
|
|
|
response: 'Server Error 500', // custom error message to show
|
|
|
url: 'http://www.baidu.com/zzz.png',
|
|
|
},
|
|
|
]);
|
|
|
|
|
|
const handleChange = ({ file, fileList }: UploadChangeParam) => {
|
|
|
if (file.status !== 'uploading') {
|
|
|
console.log(file, fileList);
|
|
|
}
|
|
|
};
|
|
|
const beforeUpload: UploadProps['beforeUpload'] = file => {
|
|
|
const isPNG = file.type === 'image/png';
|
|
|
if (!isPNG) {
|
|
|
message.error(`${file.name} is not a png file`);
|
|
|
}
|
|
|
return isPNG || Upload.LIST_IGNORE;
|
|
|
};
|
|
|
</script>
|
