ant-design-vue3实现上传图片错误时图片不显示在预览列表中

在项目遇到的问题:

使用ant-design-vue3的a-upload的上传图片功能,实现上传图片后图片预览的功能,框架中默认是上传后就会预览,但是实际是如果不符合格式的文件或是图片不要预览在列表中,以免在提交调研接口的时候将错误的图片也一起提交了,导致接口报错;

在解决这个问题的时候a-upload提供了一个属性   :before-upload="beforeUpload"   

在beforeUpload方法中官方文档给的是:
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;

};

由于这里返回的是return isPNG || Upload.LIST_IGNORE  所以导致上传的文件或是图片无论格式是否正确,都会显示在预览列表中,如果像要将格式不正确的不显示在列表中,将返回改为:

return Upload.LIST_IGNORE;就可以了   

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,你的问题是如何在 Ant Design 的 Table 显示预览图片。对吧? 如果是这样的话,可以考虑使用 Ant Design Upload 组件和 Modal 组件实现。具体步骤如下: 1. 在 Table ,使用 render 函数来渲染每一行的数据,其包括需要显示预览图片的列。 2. 在 render 函数,使用 Upload 组件上传图片,并将图片的 url 存储在 state 。 3. 在 render 函数,使用 Modal 组件显示预览图片。当用户点击图片,Modal 组件显示图片预览。 下面是一个简单的示例代码: ```javascript <template> <a-table :columns="columns" :data-source="data"> <template #avatar="text"> <a-upload :show-upload-list="false" :before-upload="handleUpload" > <a-avatar :src="avatarUrl" /> </a-upload> <a-modal :visible="previewVisible" @cancel="handleCancel"> <a-img :src="previewImage" /> </a-modal> </template> </a-table> </template> <script> export default { data() { return { data: [ { name: "John Brown", age: 32, avatarUrl: "", }, ], previewVisible: false, previewImage: "", }; }, methods: { handleUpload(file) { // 上传图片,并将图片的 url 存储在 state this.avatarUrl = URL.createObjectURL(file.raw); }, handlePreview(url) { // 显示图片预览 this.previewImage = url; this.previewVisible = true; }, handleCancel() { // 隐藏图片预览 this.previewVisible = false; }, }, computed: { columns() { return [ { title: "Name", dataIndex: "name", }, { title: "Age", dataIndex: "age", }, { title: "Avatar", dataIndex: "avatarUrl", scopedSlots: { customRender: "avatar" }, width: "20%", }, ]; }, }, }; </script> ``` 在这个示例,我们使用了 Upload 组件上传图片,并将图片的 url 存储在 state 。在 render 函数,我们使用了 Modal 组件显示预览图片。当用户点击图片,Modal 组件显示图片预览。 希望这可以帮助到你!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值