antd upload自定义上传图片前后端交互

1、引入antd上传图片需要的包

1. import React, { Component } from ‘react‘;
2. import { Upload, Icon, message } from ‘antd‘; 
3. import reqwest from ‘reqwest‘;

class Register extends Component {
  state = {
　　loading: false,
  };
render() {
  const uploadButton = (
  <div>
    <Icon type={this.state.loading ? ‘loading‘ : ‘plus‘} />
    <div className="ant-upload-text">上传</div>
  </div>
);
const { imageUrl } = this.state;

const props = {
  name: "avatar",
  showUploadList: false,//设置只上传一张图片，根据实际情况修改
  customRequest: info => {//手动上传
  const formData = new FormData();
  formData.append(‘avatar‘, info.file);//名字和后端接口名字对应
  reqwest({
  url: ‘http://localhost:8080/user/uploadImage‘,//上传url
  method: ‘post‘,
  processData: false,
  data: formData,
  success: (res) => {//上传成功回调
　　if (res.code === ‘0‘) {
　　this.setState({
　　  imageUrl: res.imageUrl
　　});
　　message.success(‘上传成功！‘);
  }
},
error: () => {//上传失败回调
  message.error(‘上传失败！‘);
},
});

},
onRemove: file => {//删除图片调用
  this.setState(state => {
  const index = state.fileList.indexOf(file);
  const newFileList = state.fileList.slice();
  newFileList.splice(index, 1);
  return {
    fileList: newFileList,
  };
});
},
listType: "picture-card",
className: "avatar-uploader",

beforeUpload: file => {//控制上传图片格式
  const isJpgOrPng = file.type === ‘image/jpeg‘ || file.type === ‘image/png‘;

  if (!isJpgOrPng) {
    message.error(‘您只能上传JPG/PNG 文件!‘);
    return;
  }
 const isLt2M = file.size / 1024 / 1024 < 2;
 if (!isLt2M) {
   message.error(‘图片大小必须小于2MB!‘);
   return;
}
  return isJpgOrPng && isLt2M;
},
};
}

return (
 <div className={styles.main}>
  <Upload {...props}>
   {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: ‘100%‘ }} /> : uploadButton}
 </Upload>
</div>
)
}
 3、后端代码实现

@RestController
@RequestMapping("/user")
public class UserController {

/**
* 图片上传
*/
@RequestMapping(value = "/uploadImage",method = RequestMethod.POST)
@ResponseBody
public R uploadImage(@RequestParam(value = "avatar") MultipartFile avatar){

Map<String,Object> map = new HashMap<>();
if (avatar.isEmpty()) {
return R.error();
}else {

//保存时的文件名
DateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
Calendar calendar = Calendar.getInstance();
String dateName = df.format(calendar.getTime())+avatar.getOriginalFilename();

//保存文件的绝对路径
WebApplicationContext webApplicationContext = (WebApplicationContext) SpringContextUtils.applicationContext;
ServletContext servletContext = webApplicationContext.getServletContext();
String realPath = servletContext.getRealPath("/");

String filePath = realPath + "WEB-INF"+File.separator + "classes" + File.separator +"static" + File.separator + "resource" + File.separator+dateName;//此路径是放在tomcat war包的绝对路径
File newFile = new File(filePath);
System.out.println("filePath=:"+filePath);
//MultipartFile的方法直接写文件
try {

//上传文件
avatar.transferTo(newFile);

//数据库存储的相对路径
String projectPath = servletContext.getContextPath();
HttpServletRequest request = HttpContextUtils.getHttpServletRequest();
String contextpath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+projectPath;
String url = contextpath + "/resource/"+dateName;//此路径是放在tomcat war包的相对路径
//文件名与文件URL存入数据库表
System.out.println("url=:"+url);
map.put("imageUrl",url);//返回前台
} catch (IllegalStateException | IOException e) {
e.printStackTrace();
}
}
return R.ok(map);
}
}

antd upload自定义上传图片前后端交互

原文：https://www.cnblogs.com/xiaoyuhouer/p/12456217.html