使用elementUI实现将图片上传到本地
来源:互联网 发布:tcl集团的营销网络 编辑:程序博客网 时间:2024/06/18 03:41
查阅饿了吗官方文档可以了解上传组件的使用方法。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的方法见官方文档
上传到本地,需要在后台建立一个接口进行接收,接口代码如下:
@Overridepublic 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];}
阅读全文
0 0
- 使用elementUI实现将图片上传到本地
- iOS-使用命令行实现将本地代码上传到GitHub
- 轻松实现将上传图片到数据库
- 轻松实现将上传图片到数据库
- winform中如何将本地图片上传到服务器
- java中怎么将本地图片上传到服务器上
- ant脚本------实现将本地class 打包上传到服务器
- 使用Git将本地代码上传到GitHub
- 使用Git将本地代码上传到GitHub
- 使用git将本地代码上传到github
- 使用git命令将本地项目上传到Gitlab上
- 使用git将本地项目上传到github上面
- Git的使用--如何将本地项目上传到Github
- 使用git将本地项目上传到git远程仓库
- 使用git将本地项目上传到github
- 使用git命令方式将本地工程上传到Gitlab
- Git的使用--将本地项目上传到Github
- 《 Git的使用--如何将本地项目上传到Github》
- Zabbix监控Mysql5.5主从同步
- 区块链简单解释
- VS2013中安装配置和使用Boost库
- Java 并发工具包 java.util.concurrent 用户指南
- java设计模式之装饰器模式
- 使用elementUI实现将图片上传到本地
- 安卓点击事件音效(增加+控制)
- 日期转换
- Git-分支冲突(笔记)
- mybatis返回map类型数据空值字段不显示(三种解决方法)
- Yarn资源配置说明
- ASP.NET MVC Core自定义TagHelper
- Java SE -聚合操作[Aggregate Operaitions]
- 多种富文本编辑器的对比