查阅饿了吗官方文档可以了解上传组件的使用方法。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实现将图片上传到本地的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
无争山庄资源网 Copyright www.whwtcm.com
暂无“使用elementUI实现将图片上传到本地的示例”评论...
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。
更新日志
2024年11月17日
2024年11月17日
- 中国武警男声合唱团《辉煌之声1天路》[DTS-WAV分轨]
- 紫薇《旧曲新韵》[320K/MP3][175.29MB]
- 紫薇《旧曲新韵》[FLAC/分轨][550.18MB]
- 周深《反深代词》[先听版][320K/MP3][72.71MB]
- 李佳薇.2024-会发光的【黑籁音乐】【FLAC分轨】
- 后弦.2012-很有爱【天浩盛世】【WAV+CUE】
- 林俊吉.2012-将你惜命命【美华】【WAV+CUE】
- 晓雅《分享》DTS-WAV
- 黑鸭子2008-飞歌[首版][WAV+CUE]
- 黄乙玲1989-水泼落地难收回[日本天龙版][WAV+CUE]
- 周深《反深代词》[先听版][FLAC/分轨][310.97MB]
- 姜育恒1984《什么时候·串起又散落》台湾复刻版[WAV+CUE][1G]
- 那英《如今》引进版[WAV+CUE][1G]
- 蔡幸娟.1991-真的让我爱你吗【飞碟】【WAV+CUE】
- 群星.2024-好团圆电视剧原声带【TME】【FLAC分轨】