Vue Antd Upload 是 Antd 的一款上傳組件，借助它可以輕松地將本地的文件上傳至服務器端。不僅如此，Upload 還支持文件類型限制、文件大小限制、上傳前后的一系列事件等，更加方便了我們對上傳行為的控制。

使用 Upload，需要將其配置為一組表單控件的一部分，或者是手動進行控件的創建和附加。下面是一些示例代碼。

<template>
<div>
<form-item label="請選擇文件">
<upload
ref="upload"
:action="uploadUrl"
:headers="myHeaders"
:data="{ msg: 'hello' }"
:multiple="false"
:before-upload="beforeUpload"
:on-progress="onUploadProgress"
:on-success="onUploadSuccess"
:on-error="onUploadError">
<button icon="upload">上傳文件</button>
</upload>
</form-item>
</div>
</template>
<script>
export default {
data() {
return {
uploadUrl: 'https://www.mocky.io/v2/5cc8019d300000980a055e76', // 上傳接口地址
myHeaders: { // 上傳請求頭部設置
Authorization: localStorage.token
}
};
},
methods: {
beforeUpload(file) {
const isLt2M = file.size / 1024 / 1024< 2; // 限制上傳文件大小
if (!isLt2M) {
this.$message.error('上傳文件大小不能超過2MB！');
}
return isLt2M;
},
onUploadProgress(event, file, fileList) {
console.log(event, file, fileList);
},
onUploadSuccess(response, file, fileList) {
console.log(response, file, fileList);
},
onUploadError(err, file, fileList) {
console.log(err, file, fileList);
}
}
};
</script>

Upload 的配置項需要根據實際需求進行設置。例如，在上述代碼中，我們設置了上傳接口地址（action）、上傳請求頭部設置（headers）、上傳的文件（data）、上傳前的事件處理（before-upload）、上傳進度的事件處理（on-progress）、上傳成功的事件處理（on-success）以及上傳錯誤的事件處理（on-error）。

總體來說，Vue Antd Upload 是一款功能豐富且易于使用的上傳組件。通過對其配置和事件進行合理的設置，可以實現各種上傳場景的需求。希望這篇文章能夠幫助讀者更好地理解 Upload 的使用方式。