首先看elementui中给的例子:

上传得到的地址是本地的

目前页面看到的图片只是自己的缓存，没有真正存入服务器,需要自己写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官网找到

如果上传失败，移除该图片；

这里只是做了个演示，将本地图片的地址替换为服务器地址，当第二次打开时，应该将服务器的地址传输给页面

此时地址已替换为服务器地址

前端代码:

<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; },

从服务器读取图片 已经在另一篇文章中写过