【Ant.designpro】上传图片

原创

已于 2024-12-10 18:52:37 修改 · 763 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #python

于 2024-11-05 19:04:06 首次发布

文章目录

一、前端
二、后端

一、前端

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

<ProFormUploadButton
  label={
   
   "上传手续图片"}
  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方法
在他里面写接口传数据

<ProFormUploadButton
	# 限制图片选择
 accept={
   
   "image/jpeg,image/png"}
  label={
   
   "上传手续图片"}
  name={
   
   "imgs"}
  max={
   
   5} 
  fieldProps={
   
   {
   
   
	maxCount:5  //图片上传最大数
   	beforeUpload:async(file)=>{
   
   
     const formData = new FormData();
     formData.append('file', file</