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


Posted in Javascript onSeptember 04, 2018

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

前台的页面代码为:

<el-upload
        class="upload-demo"
        ref="upload"
        action="http://127.0.0.1:20001/Administration/MediaApiLhUploadHandler"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :file-list="fileList"
        :auto-upload="false"
       >
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
       </el-upload>

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

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

@Override
	public void handle(List<FileItem> fileItemList, NetUpMediaapiImgUpload up, NetDownMediaapiImgUpload down, HttpServletResponse response) {
		System.out.println("path:"+getBasePath());
		if (!CommUtil.isEmpityList(fileItemList)) {
			List<String> 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;
	}
	/**
	 * 获取资源路径
	 * @return
	 */
	private static String getBasePath(){
		String template_dir = System.getProperty("user.dir");
		return template_dir.substring(0,template_dir.lastIndexOf(File.separator));
	}
 
	/**
	 * 注意:不同的浏览器提交的文件名是不一样的,有些浏览器提交上来的文件名是带有路径的,如: c:\a\b\1.txt,而有些只是单纯的文件名,如:1.txt
	 * 处理获取到的上传文件的文件名的路径部分,只保留文件名部分
	 * @param fileName
	 * @return
	 */
	private static String getFileName(String fileName){
		fileName = fileName.substring(fileName.lastIndexOf(File.separator)+1);
		return fileName;
	}
	/**
	 * 格式化文件名
	 * @param fileName
	 * @return
	 */
	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实现将图片上传到本地的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
让你的博文自动带上缩址的实现代码,方便发到微博客上
Dec 28 Javascript
JS教程:window.location使用方法的区别介绍
Oct 04 Javascript
Javascript实现的简单右键菜单类
Sep 23 Javascript
基于React.js实现原生js拖拽效果引发的思考
Mar 30 Javascript
原生JavaScript编写canvas版的连连看游戏
May 29 Javascript
实现easyui的datagrid导出为excel的示例代码
Nov 10 Javascript
JS无缝滚动效果实现方法分析
Dec 21 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
Feb 09 Javascript
select2 ajax 设置默认值,初始值的方法
Aug 09 Javascript
配置eslint规范项目代码风格
Mar 11 Javascript
vue+webpack 更换主题N种方案优劣分析
Oct 28 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
Nov 01 Javascript
element UI upload组件上传附件格式限制方法
Sep 04 #Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
Sep 04 #Javascript
webpack 3.X学习之多页面打包的方法
Sep 04 #Javascript
JS获取并处理php数组的方法实例分析
Sep 04 #Javascript
vue click.stop阻止点击事件继续传播的方法
Sep 04 #Javascript
vue form 表单提交后刷新页面的方法
Sep 04 #Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
Dec 30 #Javascript
You might like
谈谈PHP语法(2)
2006/10/09 PHP
PHP中feof()函数实例测试
2014/08/23 PHP
php事件驱动化设计详解
2016/11/10 PHP
Laravel 框架基于自带的用户系统实现登录注册及错误处理功能分析
2020/04/14 PHP
JavaScript 嵌套函数指向this对象错误的解决方法
2010/03/15 Javascript
了解一点js的Eval函数
2012/07/26 Javascript
在NodeJS中启用ECMAScript 6小结(windos以及Linux)
2014/07/15 NodeJs
教你如何使用firebug调试功能了解javascript闭包和this
2015/03/04 Javascript
详解JavaScript中Date.UTC()方法的使用
2015/06/12 Javascript
基于JS实现Android,iOS一个手势动画效果
2016/04/27 Javascript
JavaScript代码实现图片循环滚动效果
2020/03/19 Javascript
jQuery实现弹窗居中效果类似alert()
2017/02/27 Javascript
JS实现的找零张数最小问题示例
2017/11/28 Javascript
nodejs同步调用获取mysql数据时遇到的大坑
2019/03/02 NodeJs
微信小程序云开发之模拟后台增删改查
2019/05/16 Javascript
bootstrap table实现iview固定列的效果实例代码详解
2019/09/30 Javascript
python三元运算符实现方法
2013/12/17 Python
解决Python出现_warn_unsafe_extraction问题的方法
2016/03/24 Python
python数据批量写入ScrolledText的优化方法
2018/10/11 Python
Python3.5基础之变量、数据结构、条件和循环语句、break与continue语句实例详解
2019/04/26 Python
分享8点超级有用的Python编程建议(推荐)
2019/10/13 Python
详解在python操作数据库中游标的使用方法
2019/11/12 Python
Python reduce函数作用及实例解析
2020/05/08 Python
pandas dataframe 中的explode函数用法详解
2020/05/18 Python
requests在python中发送请求的实例讲解
2021/02/17 Python
CSS3使用transition实现的鼠标悬停淡入淡出
2015/01/09 HTML / CSS
Html5新特性用canvas标签画多条直线附效果截图
2014/06/30 HTML / CSS
HTML5 localStorage使用总结
2017/02/22 HTML / CSS
彪马日本官网:PUMA日本
2019/01/31 全球购物
JVM是一个编译程序还是解释程序
2012/09/11 面试题
教师实习自我鉴定
2013/12/13 职场文书
我的求职计划书
2014/01/10 职场文书
查摆问题整改措施
2014/10/24 职场文书
2015年发展党员工作总结报告
2015/03/31 职场文书
陪护人员误工证明
2015/06/24 职场文书
SpringBoot实现quartz定时任务可视化管理功能
2021/08/30 Java/Android