上传得到的地址是本地的
目前页面看到的图片只是自己的缓存，没有真正存入服务器,需要自己写action服务来接受保存图片
服务器接收图片代码如下:
@ResponseBody
@RequestMapping(value = "/uploadFile", method = { RequestMethod.GET, RequestMethod.POST })
public ResponseDTO uploadFile(@RequestParam("file") MultipartFile file, HttpServletRequest request) {
try {
// 原名字
String originalFilename = file.getOriginalFilename();
String suffix = originalFilename.substring(originalFilename.indexOf("."));
//MD5
String fileName = DigestUtils.md5DigestAsHex(file.getBytes()) + suffix;
String sf = suffix.substring(1);
if (file.getSize() > Commons.fileSize)
return new ResponseDTO(-1, "上传图片要小于2M!", null);
if (!checkImg.contains(sf.toLowerCase()))
return new ResponseDTO(-1, "上传格式错误!", null);
System.out.println(fileName);
boolean f = FileUtil.uploadFile(file.getBytes(), fileUploadPath + fileName);
if (f) {
// 数据库ID
String id = Commons.getUUID();
// 上传用户名字
String no = (String) request.getSession().getAttribute("no");
//将图片记录存入服务器
//TODO
Map<String, Object> map = new HashMap<String, Object>();
map.put("MD5", fileName);
return new ResponseDTO(1, "上传成功!", map);
}
return new ResponseDTO(-1, "上传失败!", null);
} catch (IOException e) {
return new ResponseDTO(-1, "上传失败!", null);
}
}
fileutil方法:
import java.io.FileOutputStream;
import java.io.IOException;
public class FileUtil {
public static boolean uploadFile(byte[] file, String fileName) {
FileOutputStream out = null;
try {
out = new FileOutputStream(fileName);
out.write(file);
out.flush();
return true;
} catch (IOException e) {
return false;
} finally {
try {
out.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
}
当上传成功后我返回了图片的MD5，接收结果如下:
这些钩子函数可以在elementui官网找到
http://element-cn.eleme.io/#/zh-CN/component/upload
如果上传失败，移除该图片；
这里只是做了个演示，将本地图片的地址替换为服务器地址，当第二次打开时，应该将服务器的地址传输给页面
此时地址已替换为服务器地址
前端代码:
<el-upload action="/index/uploadFile" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="uploadSuccess" :file-list="fileList" :before-upload="beforeAvatarUpload"> <i class="el-icon-plus"></i> </el-upload> <el-dialog :visible.sync="dialogVisible"> <img width="100%" :src="dialogImageUrl" alt=""> </el-dialog>
data:
fileList: [], //图片信息 dialogImageUrl: '', dialogVisible: false,
函数:
uploadSuccess: function(response, file, fileList) {
debugger;
this.$message({
showClose: true,
message: response.msg,
type: response.codeResult == 1 ? "success" : "error"
});
if (response.codeResult != 1) {
//上传失败
this.handleRemove(file, fileList, true);
} else {
if (this.form.imgUrl == undefined)
this.form.imgUrl = [];
this.form.imgUrl.push(response.data.MD5);
file.id=response.data.MD5;
file.url="/index/downloadFile?fileName="+file.id;
}
},
handleRemove(file, fileList, bool) {
debugger;
if (bool) {
$.each(fileList, (i, value) => {
if (file.uid == value.uid) {
fileList.splice(i, 1);
return false;
}
})
}
for (var i = 0; i < this.form.imgUrl.length; i++) {
if (this.form.imgUrl[i] == file.id) {
this.form.imgUrl.splice(i, 1);
break;
}
}
console.log(this.form);
console.log(file, fileList);
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
beforeAvatarUpload(file) {
this.uploadData = file.uid;
const isJPG = file.type.toLowerCase() === 'image/jpeg';
const isGIF = file.type.toLowerCase() === 'image/gif';
const isPNG = file.type.toLowerCase() === 'image/png';
const isBMP = file.type.toLowerCase() === 'image/bmp';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG && !isGIF && !isPNG && !isBMP) {
this.$message.error('上传图片必须是JPG/GIF/PNG/BMP 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
return (isJPG || isBMP || isGIF || isPNG) && isLt2M;
},
