### 使用 `vben
-admin` 中的 `
ant-design-vue` 封装图片上传方法
在 `vben
-admin` 框架中，由于其集成了 `
ant-design-vue` 组件库，因此可以通过该组件库提供的 `Upload` 组件来实现图片上传功能。以下是关于如何封装和使用图片上传的具体方法：
#### 1. 配置 Upload 组件的基础属性
`
ant-design-vue` 提供了一个强大的 `a
-upload` 组件，支持多种文件上传场景。为了适配 `vben
-admin` 的架构设计，可以对其进行二次封装。
```
vue
<template>
<a
-upload
:action="uploadUrl"
:headers="headers"
:before
-upload="handleBeforeUpload"
@change="handleChange"
>
<a
-button>点击上传</a
-button>
</a
-upload>
</template>
<script lang="ts">
import { defineComponent } from '
vue';
export default defineComponent
({
data
() {
return {
uploadUrl: '/api/upload', // 替换为实际接口地址
headers: {}, // 设置请求头
};
},
methods: {
handleBeforeUpload
(file: File
): boolean | Promise<File> {
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
if
(!isJpgOrPng
) {
this.$message.error
('仅允许上传 JPG
或 PNG 文件!'
);
}
const isLt2M = file.size / 1024 / 1024 < 2;
if
(!isLt2M
) {
this.$message.error
('文件
大小不得超过 2MB!'
);
}
return isJpgOrPng && isLt2M; // 返回布尔值决定是否继续上传
},
handleChange
(info: any
) {
if
(info.file.status !== 'uploading'
) {
console.log
(info.file, info.fileList
);
}
if
(info.file.status === 'done'
) {
this.$message.success
(`${info.file.name} 文件上传成功`
);
} else if
(info.file.status === 'error'
) {
this.$message.error
(`${info.file.name} 文件上传失败.`
);
}
},
},
}
);
</script>
```
上述代码展示了基础的图片上传逻辑，包括文件类型校验、
大小限制以及状态回调处理[^3]。
---
#### 2. 封装成可重用的组件
为了让图片上传功能更加通用化，可以将其封装为独立的
Vue 组件，并暴露必要的配置项。
```
vue
<template>
<div class="custom
-image
-uploader">
<a
-upload
:action="props.uploadAction"
:headers="props.headers"
list
-type="picture
-card"
:file
-list="state.fileList"
:before
-upload="handleBeforeUpload"
@change="handleChange"
>
<div v
-if="state.fileList.length < props.maxCount">
<loading
-outlined v
-if="state.loading"></loading
-outlined>
<plus
-outlined v
-else></plus
-outlined>
<div class="
ant-upload
-text">上传</div>
</div>
</a
-upload>
<modal
:visible="state.previewVisible"
:footer="null"
@cancel="handleCancelPreview"
>
<img alt="example" style="width: 100%" :src="state.previewImage" />
</modal>
</div>
</template>
<script setup lang="ts">
import { reactive, PropType } from '
vue';
import type { UploadChangeParam, RcFile } from '
ant-design-vue/es/upload/interface';
const props = defineProps
({
uploadAction: String as PropType<string>,
headers: Object as PropType<object>,
maxCount: Number,
}
);
const state = reactive
({
previewVisible: false,
previewImage: '',
fileList: [],
loading: false,
}
);
function getBase64
(img: RcFile, callback: Function
) {
const reader = new FileReader
();
reader.addEventListener
('load',
() => callback
(reader.result
));
reader.readAsDataURL
(img
);
}
function handleCancelPreview
(): void {
state.previewVisible = false;
}
function handleBeforeUpload
(file: RcFile
): boolean {
const isValidFileType =
['image/jpeg', 'image/jpg', 'image/png'].indexOf
(file.type.toLowerCase
()) >= 0;
if
(!isValidFileType
) {
alert
('仅支持 JPEG/PNG 类型'
);
return false;
}
const isValidFileSize = file.size! / 1024 / 1024 < 2;
if
(!isValidFileSize
) {
alert
('文件
大小不能超过 2 MB'
);
return false;
}
return true;
}
function handleChange
({ file }: UploadChangeParam
): void {
if
(file.status === 'uploading'
) {
state.loading = true;
return;
}
if
(file.status === 'done'
) {
getBase64
(file.originFileObj!,
(url: string
) => {
state.previewImage = url;
state.previewVisible = true;
state.loading = false;
}
);
}
}
</script>
```
此封装版本提供了更灵活的功能扩展能力，例如预览已上传图片的能力[^5]。
---
#### 3. 结合后端 API 实现完整的业务流程
在实际项目中，通常需要配合后端服务完成图片存储操作。推荐使用 FastAPI
或 Django 来构建 RESTful 接口[^4]。以下是一个简单的 Python 后端示例：
```python
from fastapi import FastAPI, File, UploadFile
from starlette.responses import JSONResponse
app = FastAPI
()
@app.post
("/api/upload/"
)
async def create_upload_file
(file: UploadFile = File
(...
)):
try:
contents = await file.read
()
with open
(f"./uploads/{file.filename}", "wb"
) as f:
f.write
(contents
)
return JSONResponse
({"filename": file.filename}, status_code=200
)
except Exception as e:
return JSONResponse
({"error": str
(e
)}, status_code=500
)
```
通过将
前端上传的数据传递到此类接口，即可完成整个图片上传链条的闭环。
---
#### 总结
通过对 `
ant-design-vue` 的 `Upload` 组件进行合理封装，可以在 `vben
-admin` 框架下轻松实现图片上传功能。同时，结合后端服务进一步完善数据持久化的环节，能够满足大多数企业级应用场景的需求[^1]。
---
文章讨论了在双轴图表中，柱状图默认不显示的问题，解决办法是将柱状图和折线图的配置信息位置互换。提供了官方示例代码和详细配置，包括轴格式化、颜色、交互和事件处理。
最低0.47元/天 解锁文章
扫一扫
1217
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
