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

前端之家收集整理的这篇文章主要介绍了使用elementUI实现将图片上传到本地的示例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

查阅饿了吗官方文档可以了解上传组件的使用方法http://element.eleme.io/#/zh-CN/component/upload

前台页面代码为:

文件 上传到服务器

具体的绑定method的方法见官方文档

上传到本地,需要在后台建立一个接口进行接收,接口代码如下:

fileItemList,NetUpMediaapiImgUpload up,NetDownMediaapiImgUpload down,HttpServletResponse response) { System.out.println("path:"+getBasePath()); if (!CommUtil.isEmpityList(fileItemList)) { List 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\\";//<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>应该放在WEB<a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a>夹的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<a href="https://www.jb51.cc/tag/shuchu/" target="_blank" class="keywords">输出</a>流将缓冲区的数据写入到指定的目录(path)当中
            out.write(buffer,len);
        }
        in.close();
        out.close();
        //<a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>处理<a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a><a href="https://www.jb51.cc/tag/shangchuan/" target="_blank" class="keywords">上传</a>时<a href="https://www.jb51.cc/tag/shengcheng/" target="_blank" class="keywords">生成</a>的临时<a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a>
        file.delete();
        result = path+"/"+fileName;
    } catch (Exception e) {
        e.printStackTrace();
    }
    return result;
}
/**
 * <a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>资源路径
 * @return
 */
private static String getBasePath(){
    String template_dir = System.getProperty("user.dir");
    return template_dir.substring(0,template_dir.lastIndexOf(File.separator));
}

/**
 * 注意:不同的浏览器提交的<a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a>名是不一样的,有些浏览器提交上来的<a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a>名是带有路径的,如: c:\a\b\1.txt,而有些只是单纯的<a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a>名,如:1.txt
 * 处理<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>到的<a href="https://www.jb51.cc/tag/shangchuan/" target="_blank" class="keywords">上传</a><a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a>的<a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a>名的路径部分,只保留<a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a>名部分
 * @param fileName
 * @return
 */
private static String getFileName(String fileName){
    fileName = fileName.substring(fileName.lastIndexOf(File.separator)+1);
    return fileName;
}
/**
 * 格式化<a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a>名
 * @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;
}

/**
 * 获得<a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a>名前缀
 */
private static String getFilePrefix(String fileName){
    fileName = formatFileName(fileName);
    String[] sArr = fileName.split("\\.");
    return sArr[0];
}

/**
 * 获得<a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a>名后缀
 */
private static String getFileSuffix(String fileName){
    fileName = formatFileName(fileName);
    String[] sArr = fileName.split("\\.");
    return sArr[1];
}

以上这篇使用elementUI实现将图片上传到本地的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/js/30471.html

猜你在找的JavaScript相关文章