写在前面
最近笔者在开发个人博客的后台管理系统,里面用到了图片上传相关的功能,在这里记录并分享一下,希望可以帮到大家,话不多说直接开始吧!(想看代码的可以直接跳到最后哦~)
效果
技术栈
前端:react+antdesign(upload组件)
后端:node+express+multer+uuid
前端
上传前
这边前端直接使用的 antdesign 所提供的上传组件,代码如下
<Upload
accept="multipart/form-data"
name="avater"
listType="picture-card"
fileList={[]} // 手动设置空的 fileList
className="avatar-uploader"
showUploadList={false}
beforeUpload={(file) => {
handlePreview(file)
return false // 阻止默认上传行为
}}
>
{imageUrl ? <img src={imageUrl} alt="avater" style={
{ width: '100%' }} /> : uploadButton}
</Upload>
accept="multipart/form-data:是用于指定在 HTML 表单中上传文件时使用的编码类型。它告诉服务器将表单数据编码为 multipart/form-data
格式,这是用于上传文件的一种常见方式。
beforeUpload:则是需要在上传前对文件进行处理,我们来看一下代码里面发生了什么。
const handlePreview = async (file: File) => {
setImageUrl('')
setLoading(true)
const isImage = file.type.startsWith('image/')
const isImageExtension = /\.(jpg|jpeg|png|gif)$/i.test(file.name)
if (!isImage || !isImageExtension) {
message.error(`${file.name} is not a supported image file`)
return Upload.LIST_IGNORE
}
try {
const reader = new FileReader()
reader.onload = () => {
setImageUrl(reader.r