ant-design-vue图片上传

Question

如何在vue2中用ant-design-vue实现图片上传
大概需要这个样子

然后成功后可以正常回显，成功失败都给个提示

ps:chatgpt别来了！，我也有！

Answer 1

引自免费微信小程序：皆我百晓生

要在Vue 2中使用Ant Design Vue (简称ADVN) 实现图片上传功能，你需要遵循以下步骤：

1. 首先，确保已经安装了ant-design-vue库。如果没有安装，可以通过npm进行安装：

npm install antd@3.x advue@2.x

1. 在你的项目中引入所需的组件：

import { Upload, Button } from 'ant-design-vue';

1. 在模板中添加一个Upload组件，并设置必要的属性：

<template>
  <div>
    <h4>营业执照</h4>
    <Upload
      action="your-upload-url"
      :before-upload="handleBeforeUpload"
      :on-success="handleSuccess"
      :on-error="handleError"
    >
      <Button type="primary">文件上传中</Button>
    </Upload>
    <p v-if="uploaded" class="success-message">上传成功</p>
    <p v-else-if="error" class="error-message">上传失败</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uploaded: false,
      error: false,
    };
  },
  methods: {
    handleBeforeUpload(file) {
      // 检查文件类型、大小等条件，返回true或false
      const isJPGOrPNG = file.type === 'image/jpeg' || file.type === 'image/png';
      const maxSize = 1024 * 1024; // 1MB
      return isJPGOrPNG && file.size <= maxSize;
    },
    handleSuccess(response, file) {
      this.uploaded = true;
      console.log('Upload success:', response);
    },
    handleError(error, file) {
      this.error = true;
      console.error('Upload error:', error);
    },
  },
};
</script>

在这个例子中，我们创建了一个简单的图片上传组件。用户点击按钮选择图片后，会调用handleBeforeUpload方法检查文件是否符合要求（这里只允许.jpg和.png格式且不超过1MB）。如果通过验证，图片会被上传到指定的URL（your-upload-url）。

成功或失败的回调函数分别为handleSuccess和handleError，它们分别会在上传成功或失败时执行。同时，根据这些状态，我们可以显示相应的提示信息。

注意：替换your-upload-url为你的实际服务器端接收图片的API地址。在生产环境中，你可能还需要处理跨域问题。另外，实际项目中可能需要将图片数据发送到服务器并获取返回的URL，以便在页面上展示图片。这取决于你的服务器端实现。