使用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 相关文章推荐
基于逻辑运算的简单权限系统(实现) JS 版
Mar 24 Javascript
js中typeof的用法汇总
Dec 12 Javascript
JS图像无缝滚动脚本非常好用
Feb 10 Javascript
防止按钮在短时间内被多次点击的方法
Mar 10 Javascript
js HTML5手机刮刮乐代码
Sep 29 Javascript
AngularJS中的按需加载ocLazyLoad示例
Jan 11 Javascript
微信小程序中实现一对多发消息详解及实例代码
Feb 14 Javascript
利用JavaScript如何查询某个值是否数组内
Jul 30 Javascript
微信小程序 自定义消息提示框
Aug 06 Javascript
webpack 样式加载的实现原理
Jun 12 Javascript
Redux实现组合计数器的示例代码
Jul 04 Javascript
Angular服务Request异步请求的实例讲解
Aug 13 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
德生BCL3000的电路分析和打磨
2021/03/02 无线电
PHP curl使用实例
2015/07/02 PHP
javascript第一课
2007/02/27 Javascript
JavaScript中的其他对象
2008/01/16 Javascript
JQuery获取文本框中字符长度的代码
2011/09/29 Javascript
js滚动条回到顶部的代码
2011/12/06 Javascript
jQuery的3种请求方式$.post,$.get,$.getJSON
2014/03/28 Javascript
深入理解javascript变量声明
2014/11/20 Javascript
vue分页组件table-pagebar使用实例解析
2020/11/15 Javascript
使用bat打开多个cmd窗口执行gulp、node
2017/02/17 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
2017/06/28 Javascript
微信小程序获取循环元素id以及wx.login登录操作
2017/08/17 Javascript
vue学习教程之带你一步步详细解析vue-cli
2017/12/26 Javascript
Webpack path与publicPath的区别详解
2018/05/03 Javascript
webpack4简单入门实例
2018/09/06 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
2020/03/08 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
2020/05/19 Javascript
Python xlrd读取excel日期类型的2种方法
2015/04/28 Python
Python数据分析之双色球中蓝红球分析统计示例
2018/02/03 Python
python 接口测试response返回数据对比的方法
2018/02/11 Python
python事件驱动event实现详解
2018/11/21 Python
带你认识Django
2019/01/15 Python
DRF跨域后端解决之django-cors-headers的使用
2019/01/27 Python
python实现自动化上线脚本的示例
2019/07/01 Python
python3.7简单的爬虫实例详解
2019/07/08 Python
解决Django响应JsonResponse返回json格式数据报错问题
2020/08/09 Python
python调用有道智云API实现文件批量翻译
2020/10/10 Python
Python3+Django get/post请求实现教程详解
2021/02/16 Python
详解使用CSS3的@media来编写响应式的页面
2017/11/01 HTML / CSS
HTML5 canvas基本绘图之图形组合
2016/06/27 HTML / CSS
h5封装下拉刷新
2020/08/25 HTML / CSS
党员组织关系介绍信
2014/02/13 职场文书
主题团日活动总结
2014/06/25 职场文书
护理见习报告范文
2014/11/03 职场文书
家长通知书家长意见
2014/12/30 职场文书
2015年清剿火患专项行动工作总结
2015/07/27 职场文书