首页 > 编程 > JavaScript > 正文

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

2019-11-19 13:02:11
字体:
来源:转载
供稿:网友

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表