vue2 antd 点击上传文件

在vue2中使用antd的Upload组件可以实现点击上传文件的功能。需要先安装antd和axios模块。

1. 安装antd和axios模块

npm install ant-design-vue axios --save

2. 在需要使用Upload组件的vue文件中引入antd和axios

import {Upload} from 'ant-design-vue';
import axios from 'axios';

3. 在template中使用Upload组件

<template>
  <div>
    <Upload
      :action="uploadUrl"
      :headers="headers"
      :before-upload="beforeUpload"
      :on-success="onSuccess"
      :on-error="onError"
    >
      <a-button icon="upload">点击上传</a-button>
    </Upload>
  </div>
</template>

4. 在script中设置uploadUrl和headers

export default {
  data() {
    return {
      uploadUrl: 'http://localhost:3000/upload',
      headers: {
        Authorization: 'Bearer ' + localStorage.getItem('token'),
      },
    }
  },
  methods: {
    beforeUpload(file) {
      // 在上传文件前的钩子函数，可以在此处对上传的文件进行处理
      console.log('beforeUpload', file);
      return true;
    },
    onSuccess(response, file, fileList) {
      // 上传成功后的钩子函数，可以在此处对上传成功后的结果进行处理
      console.log('onSuccess', response, file, fileList);
    },
    onError(error, file, fileList) {
      // 上传失败后的钩子函数，可以在此处对上传失败后的结果进行处理
      console.log('onError', error, file, fileList);
    },
  },
};

5. 在methods中实现上传文件的方法

export default {
  data() {
    return {
      uploadUrl: 'http://localhost:3000/upload',
      headers: {
        Authorization: 'Bearer ' + localStorage.getItem('token'),
      },
    }
  },
  methods: {
    uploadFile(file) {
      let formData = new FormData();
      formData.append('file', file);
      axios.post(this.uploadUrl, formData, {
        headers: this.headers,
      })
        .then(response => {
          console.log('uploadFile success', response);
        })
        .catch(error => {
          console.log('uploadFile error', error);
        });
    },
    beforeUpload(file) {
      // 在上传文件前的钩子函数，可以在此处对上传的文件进行处理
      console.log('beforeUpload', file);
      this.uploadFile(file);
      return false; // 返回false阻止Upload组件自动上传
    },
    onSuccess(response, file, fileList) {
      // 上传成功后的钩子函数，可以在此处对上传成功后的结果进行处理
      console.log('onSuccess', response, file, fileList);
    },
    onError(error, file, fileList) {
      // 上传失败后的钩子函数，可以在此处对上传失败后的结果进行处理
      console.log('onError', error, file, fileList);
    },
  },
};

这样就可以实现点击上传文件的功能了。在beforeUpload方法中手动调用上传文件的方法，然后返回false阻止Upload组件自动上传。这样可以在上传文件前进行一些处理，比如添加请求头、验证文件类型和大小等。上传文件的方法使用axios发送POST请求，将文件数据以FormData形式发送到服务器。在上传成功和失败的钩子函数中可以对上传结果进行处理。