antd+Vue 3实现table行内upload文件图片上传【超详细图解】

<template>
  <a-table :columns="columns" :dataSource="data">
    <template #bodyCell="{ column, text, record }">
      <template v-if="column.key === 'avatar'">
        <a-upload
          :customRequest="customRequest"
          :showUploadList="false"
          :beforeUpload="beforeUpload"
        >
          <a-avatar shape="square" :src="text" />
        </a-upload>
      </template>
      <template v-else>
        {{ text }}
      </template>
    </template>
  </a-table>
</template>
 
<script>
import { message } from 'ant-design-vue';
 
export default {
  data() {
    return {
      columns: [
        {
          title: 'Name',
          dataIndex: 'name',
        },
        {
          title: 'Avatar',
          dataIndex: 'avatar',
        },
        // 其他列数据...
      ],
      data: [
        {
          key: '1',
          name: 'John Doe',
          avatar: 'http://path-to-avatar.jpg',
        },
        // 其他数据...
      ],
    };
  },
  methods: {
    beforeUpload(file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
      if (!isJpgOrPng) {
        message.error('You can only upload JPG/PNG file!');
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        message.error('Image must smaller than 2MB!');
      }
      return isJpgOrPng && isLt2M;
    },
    customRequest(options) {
      const formData = new FormData();
      formData.append('file', options.file);
      // 这里替换为你的上传接口
      fetch('/upload', {
        method: 'POST',
        body: formData,
      })
        .then(response => response.json())
        .then(data => {
          // 假设上传成功后服务器返回的图片地址在data.url
          options.onSuccess(data.url);
        })
        .catch(error => {
          options.onError(error);
        });
    },
  },
};
</script>

这段代码展示了如何在Ant Design Vue的a-table中使用a-upload组件实现行内文件上传功能。它包括了上传前的文件类型和大小验证，以及一个简单的自定义上传请求函数customRequest，该函数会发送一个POST请求到服务器上传图片。服务器返回的图片URL将会被用来更新对应行的图片列。