antd vue 是一個基于 Vue.js 的 UI 組件庫，它提供了豐富的組件和樣式，為開發者提供了方便快捷的開發體驗。其中，antd vue 上傳組件是其中一個比較常用的組件，可以輕松實現文件上傳的功能。

首先，需要安裝 antd vue 組件庫并引入上傳組件：

npm install antd-vue --save
import { Upload } from 'antd-vue';

接下來，可以通過 Upload 組件的 action 屬性來指定上傳接口地址，并通過 data 屬性指定上傳接口的參數對象。同時，也可以通過 beforeUpload 屬性來添加上傳前的回調函數進行限制文件類型、文件大小等操作：

<template>
<Upload
:action="uploadUrl"
:data="uploadParams"
:beforeUpload="beforeUpload"
:on-success="onSuccess"
>
<Button icon="upload">點擊上傳</Button>
</Upload>
</template>
<script>
export default {
data() {
return {
uploadUrl: '/api/upload',
uploadParams: {
token: 'yourToken'
}
}
},
methods: {
beforeUpload(file) {
const isJpg = file.type === 'image/jpeg';
if (!isJpg) {
this.$message.error('只能上傳 JPG 格式的文件');
return false;
}
const isLt2M = file.size / 1024 / 1024< 2;
if (!isLt2M) {
this.$message.error('文件大小不能超過 2MB');
return false;
}
return true;
},
onSuccess(response) {
if (response.code === 0) {
this.$message.success('上傳成功！');
} else {
this.$message.error('上傳失敗！');
}
}
}
}
</script>

最后，上傳組件的樣式也可以根據自己的需求進行定制。antd vue 提供了一些上傳組件的基本樣式，如頭像上傳、拖拽上傳等，可以通過傳入屬性值來使用。

以上就是使用 antd vue 上傳組件的基本流程，通過簡單配置，就可以輕松實現文件上傳的功能。