- 引入
axios
npm install axios
- 前台输入
// 绑定@imgAdd event
$imgAdd(pos, $file) {
// 第一步.获取图片信息
var formdata = new FormData();
formdata.append('file', $file);
console.log($file);
// 存储图片信息
// [0]base64数据 [1]文件名称
let fileInfo = [];
fileInfo[0]=$file.miniurl.split(',')[1];
fileInfo[1]=$file._name;
//图片上传服务器
axios({
url: process.env.VUE_APP_BASE_API + "/common/uploadBase64",
method: 'post',
data: fileInfo,
headers: {
Authorization: "Bearer " + getToken(),
},
}).then((res) => {
console.log(res);
// 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
// $vm.$img2Url 详情见本页末尾
this.$refs.md.$img2Url(pos, res.data.url);
})
},
- Java后台加入依赖
<!--MockMultipartFile 依赖-->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-test</artifactId>
<version>5.0.5.RELEASE</version>
</dependency>
- 后台接收并转换后上传
/**
* 通用上传base64文件请求(单个)
* @param fileInfo [0]base64数据 [1]文件名称
* @return
*/
@PostMapping("/uploadBase64")
public AjaxResult uploadFileBase64(@RequestBody String[] fileInfo)
{
try
{
// 解码Base64数据
byte[] data = Base64.getDecoder().decode(fileInfo[0]);
// 创建一个临时的MutlipartFile
MultipartFile file = new MockMultipartFile("file", fileInfo[1], "image/png", data);
// 上传文件路径
String filePath = RuoYiConfig.getUploadPath();
// 上传并返回新文件名称
String fileName = FileUploadUtils.upload(filePath, file);
String url = serverConfig.getUrl() + fileName;
AjaxResult ajax = AjaxResult.success();
ajax.put("url", url);
ajax.put("fileName", fileName);
ajax.put("newFileName", FileUtils.getName(fileName));
ajax.put("originalFilename", file.getOriginalFilename());
return ajax;
}
catch (Exception e)
{
e.printStackTrace();
return AjaxResult.error(e.getMessage());
}
}