使用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实现将图片上传到本地的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。