elementui结合服务器后端上传图片

首先看elementui中http://element-cn.eleme.io/#/zh-CN/component/upload给的例子:

上传得到的地址是本地的

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

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

https://www.toutiao.com/i6628848205155025422/