使用elementUI实现将图片上传到本地的示例

查阅饿了吗官方文档可以了解上传组件的使用方法。http://element.eleme.io/#/zh-CN/component/upload

前台的页面代码为：

 选取文件
 上传到服务器

具体的绑定method的方法见官方文档

上传到本地，需要在后台建立一个接口进行接收，接口代码如下：

@Override
	public void handle(List fileItemList, NetUpMediaapiImgUpload up, NetDownMediaapiImgUpload down, HttpServletResponse response) {
		System.out.println("path:"+getbasePath());
		if (!CommUtil.isEmpityList(fileItemList)) {
			List paths=new ArrayList();
			for (FileItem fileItem : fileItemList) {
				String path = writeFile(fileItem);
				paths.add("../../static/img/"+fileItem.getName());//浏览器不允许使用绝对路径
				logger.info("上传成功:" + path);
				logger.info("更新数据");
			}
			down.setAllPath(paths);
 
		}
	}
 
	public static String writeFile(FileItem file){
		String fileName = getFileName(file.getName());
		fileName = formatFileName(fileName);
		fileName = getFilePrefix(fileName)+'.'+getFileSuffix(fileName);
		String path = getbasePath()+"/xmob-web/static/img/";
		//path="E:\xmob\trunk\xmob-web\static\img\";//图片应该放在WEB文件夹的static目录下
		File desFile = new File(path);
		if (!desFile .exists() && !desFile .isDirectory()) {
			System.out.println("//不存在");
			desFile .mkdir();
		}
		String result = null;
		try {
			InputStream in = file.getInputStream();
			FileOutputStream out = new FileOutputStream(path+"/"+fileName);
			//创建一个缓冲区
			byte buffer[] = new byte[1024];
			//判断输入流中的数据是否已经读完的标识
			int len = 0;
			//循环将输入流读入到缓冲区当中，(len=in.read(buffer))>0就表示in里面还有数据
			while((len=in.read(buffer))>0){
				//使用FileOutputStream输出流将缓冲区的数据写入到指定的目录(path)当中
				out.write(buffer, 0, len);
			}
			in.close();
			out.close();
			//删除处理文件上传时生成的临时文件
			file.delete();
			result = path+"/"+fileName;
		} catch (Exception e) {
			e.printStackTrace();
		}
		return result;
	}
	
	private static String getbasePath(){
		String template_dir = System.getProperty("user.dir");
		return template_dir.substring(0,template_dir.lastIndexOf(File.separator));
	}
 
	
	private static String getFileName(String fileName){
		fileName = fileName.substring(fileName.lastIndexOf(File.separator)+1);
		return fileName;
	}
	
	private static String formatFileName(String fileName){
		String[] sArr = fileName.split("\.");
		String str = sArr[0];
		str = str.replaceAll(" ", "");
		str = str.replaceAll("\s+|_", "-");
		String result = str+"."+sArr[1];
		return result;
	}
 
	
	private static String getFilePrefix(String fileName){
		fileName = formatFileName(fileName);
		String[] sArr = fileName.split("\.");
		return sArr[0];
	}
 
	
	private static String getFileSuffix(String fileName){
		fileName = formatFileName(fileName);
		String[] sArr = fileName.split("\.");
		return sArr[1];
	}

以上这篇使用elementUI实现将图片上传到本地的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持考高分网。