当前位置：首页 > news >正文

【Ant.designpro】上传图片

news 2025/7/13 5:49:56

文章目录

一、前端
二、后端

一、前端

fieldProps:可以监听并且获取到组件输入的内容
action={“/api/upload_image”} 直接调用后端接口

<ProFormUploadButtonlabel={"上传手续图片"}name={"imgs"}action={"/api/upload_image"}max={5} fieldProps={{onChange:(file)=>{console.log(111111111111111,file.fileList)const fList = []if(file.event){file.fileList.map((value, index)=>{fList.push(value.name)})setFileList(fList) //获取图片名和后缀}}}}
/>

formData就是后端需要的数据

const formData = new FormData();
formData.append('file', file);

我们需要用到fieldProps,在他里面用beforeUpload方法
在他里面写接口传数据

<ProFormUploadButtonlabel={"上传手续图片"}name={"imgs"}max={5} fieldProps={{maxCount:5  //图片上传最大数beforeUpload:async(file)=>{const formData = new FormData();formData.append('file', file);  const response = await upload_image(formData)}}}
/>

二、后端

# 上传文件
@server.route("/api/upload_image", methods=['post'])
def upload_image():file = request.files['file']print("file",file)filename = os.path.join(IMG_DIR,file.filename)print("filename",filename)file.save(filename)return {}