vue3实现 附件上传简单代码示例【自用】

vue3实现 附件上传简单代码示例

<el-form-item label="上传附件" prop="enclosure"><el-uploadv-model:file-list="enclosureFileList"class="upload-demo"action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"multiple:on-preview="handlePreview":on-remove="handleEnclosureRemove":before-remove="beforeRemove":limit="3":on-exceed="handleExceed"><el-button type="primary">上 传</el-button><template #tip><div class="el-upload__tip">jpg/png/doc/jpeg/pdf, and files with a size less than 500KB.</div></template></el-upload></el-form-item>

<script>
// 附件
const enclosureFileList = ref<UploadUserFile[]>([{name: "element-plus-logo.svg",url: "https://element-plus.org/images/element-plus-logo.svg",},{name: "element-plus-logo2.svg",url: "https://element-plus.org/images/element-plus-logo.svg",},
]);// 上传附件
const handleEnclosureRemove: UploadProps["onRemove"] = (file, uploadFiles) => {console.log(file, uploadFiles);
};const handlePreview: UploadProps["onPreview"] = (uploadFile) => {console.log(uploadFile);
};const handleExceed: UploadProps["onExceed"] = (files, uploadFiles) => {ElMessage.warning(`The limit is 3, you selected ${files.length} files this time, add up to ${files.length + uploadFiles.length} totally`);
};const beforeRemove: UploadProps["beforeRemove"] = (uploadFile, uploadFiles) => {return ElMessageBox.confirm(`Cancel the transfer of ${uploadFile.name} ?`).then(() => true,() => false);
};
</script>