1、引入antd上傳圖片需要的包
-
import React, { Component } from 'react';
-
import { Upload, Icon, message } from 'antd';
-
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);
}
}