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

 更新时间:2018年09月04日 14:44:05   作者:万万没想到367  
今天小编就为大家分享一篇使用elementUI实现将图片上传到本地的示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

查阅饿了吗官方文档可以了解上传组件的使用方法。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实现将图片上传到本地的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 使用Vue完成一个简单的todolist的方法

    使用Vue完成一个简单的todolist的方法

    本篇文章主要介绍了使用Vue完成一个简单的todolist的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • Vue3中使用this的详细教程

    Vue3中使用this的详细教程

    在vue3中新的组合式API中没有this,那我们如果需要用到this怎么办?下面这篇文章主要给大家介绍了关于Vue3中使用this的详细教程,需要的朋友可以参考下
    2023-07-07
  • vue-cli之引入Bootstrap问题(遇到的坑,以及解决办法)

    vue-cli之引入Bootstrap问题(遇到的坑,以及解决办法)

    这篇文章主要介绍了vue-cli之引入Bootstrap问题(遇到的坑,以及解决办法),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue实现搜索小功能

    vue实现搜索小功能

    这篇文章主要为大家详细介绍了vue实现搜索小功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • 解决vue-router在同一个路由下切换,取不到变化的路由参数问题

    解决vue-router在同一个路由下切换,取不到变化的路由参数问题

    今天小编就为大家分享一篇解决vue-router在同一个路由下切换,取不到变化的路由参数问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue-router+nginx 非根路径配置方法

    vue-router+nginx 非根路径配置方法

    这篇文章主要介绍了vue-router+nginx 非根路径配置方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • el-tree的实现叶子节点单选的示例代码

    el-tree的实现叶子节点单选的示例代码

    本文主要介绍了el-tree的实现叶子节点单选的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • 装饰者模式在日常开发中的缩影和vue中的使用详解

    装饰者模式在日常开发中的缩影和vue中的使用详解

    这篇文章主要为大家介绍了装饰者模式在日常开发中的缩影和vue中的使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • vue实现组件跟随鼠标位置弹出效果(示例代码)

    vue实现组件跟随鼠标位置弹出效果(示例代码)

    这篇文章主要介绍了vue中实现组件跟随鼠标位置弹出效果,本文通过图文示例代码相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-02-02
  • Vue调试神器vue-devtools安装方法

    Vue调试神器vue-devtools安装方法

    本篇文章主要介绍了Vue调试神器vue-devtools安装方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12

最新评论