文章目录
- 一、前端
- 二、后端
一、前端
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 {}