AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Layui多图上传

2022-12-06 135
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Layui多图上传

Layui多图上传

最近制作经销商上传附件需要实现一个多图上传的功能，前端使用的是layui框架支持多张图片上传，效果如下

20200401134307494.png

前端页面代码：

     <!--图片上传组件-->
      <div class="layui-form-item">
        <div class="layui-input-block">
          <div id="imgContentForEdit">
            <input type="hidden" id="attachListForEdit" name="attachList"/>
            <div class="layui-form-item">
              <table class="layui-table">
                <thead>
                <tr>
                  <th>文件名</th>
                  <th>状态</th>
                  <th>操作</th>
                </tr>
                </thead>
                <tbody id="demoListForEdit"></tbody>
              </table>
            </div>
          </div>
          <div class="layui-input-inline">
            <button type="button" id="uploadForEdit" class="layui-btn layui-btn-primary">
              点击选择
            </button>
          </div>
          <div class="layui-input-inline">
            <button type="button" id="uploadActionForEdit" class="layui-btn layui-btn-primary">
              <i class="layui-icon"></i>开始上传
            </button>
          </div>
        </div>
      </div>

使用前需引入layui相关的js、css文件：

<link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css"  media="all">
<script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js、css路径需要改成你本地的 -->

js核心代码

;layui.define(['jquery', 'table', 'form', 'layer', 'laydate', 'upload'], function (exports) {
  "use strict";
  var $ = layui.$, table = layui.table, layer = layui.layer, laydate = layui.laydate,
    upload = layui.upload, form = layui.form, admin = layui.admin,setter = layui.setter;
//定义请求接口
  var path = {
    uploadPic: '/merchantInfo/uploadPic',
    img:  '/readImage',
  };
  var imgList=[];
  var deleteList=[];
  //新增多文件列表示例
  var demoListView = $('#demoListForAdd');
  var  uploadListIns = upload.render({
    elem: '#uploadForAdd' ,
   url: window.ptfConfig.baseUrl + path.uploadPic,    //上传图片接口，可自行更换
    headers: { //通过 request 头传递
    Authorization: layui.data(setter.tableName)[setter.headers.accessTokenName]
  },  
    accept: 'file',
    multiple: true,
    auto: false,
    bindAction: '#uploadActionForAdd',
    choose: function(obj){
      var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
      //读取本地文件
      obj.preview(function(index, file, result){
        var tr = $(['<tr id="upload-'+ index +'">'
          ,'<td>'+ file.name +'</td>'
          ,'<td>等待上传</td>'
          ,'<td>'
          ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
          ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
          ,'</td>'
          ,'</tr>'].join(''));
        //删除
        tr.find('.demo-delete').on('click', function(){
          delete files[index]; //删除对应的文件
          tr.remove();
          uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
        });
        demoListView.append(tr);
      });
    }
    ,done: function(res, index, upload){
      if(res.code == 200){ //上传成功
        //创建附件对象
            console.log(res.data)
        var attcah={};
        attcah.attachType=res.data[0].type;
        attcah.attachName=res.data[0].originalFileName;
        attcah.url=res.data[0].url;
        attcah.fileName=res.data[0].serveFileName;
        imgList.push(attcah);//加入数组
        var tr = demoListView.find('tr#upload-'+ index)
          ,tds = tr.children();
        tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
        tds.eq(3).html(''); //清空操作
        return delete this.files[index]; //删除文件队列已经上传成功的文件
      }
      this.error(index, upload);
    }
    ,error: function(index, upload){
      var tr = demoListView.find('tr#upload-'+ index),
        tds = tr.children();
      tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
      tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
    }
  });

后端控制层

import com.hrt.framework.web.core.Result;
import com.hrt.zxxc.fxspg.file.FileBean;
import com.hrt.zxxc.fxspg.file.FileService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletRequest;
import java.util.List;
/**
 * MerchantInfoInfo Controller层
 *
 * @author generator
 * @version 1.0.0
 * @date 2019-06-27 17:28:12
 */
@Controller
@RequestMapping("merchantInfo")
public class PtfMerchantInfoController {
    @Autowired
    private FileService fileService;
    /**
     * @Param [file, request]
     * @return com.hrt.framework.web.core.Result
     * @Author youjp
     * @Description //TODO 图片上传
     * @throw
     **/
    @PostMapping(value = "uploadPic")
    @ResponseBody
    public Result uploadPic(MultipartFile[] file, HttpServletRequest request) {
        List<FileBean> filePathList = fileService.upload(request, file);
        return Result.success(filePathList);
    }
}

FileService

package com.hrt.zxxc.fxspg.file;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.BufferedInputStream;
import java.io.File;
import java.io.FileInputStream;
import java.util.ArrayList;
import java.util.Calendar;
import java.util.List;
/**
 * @program: fxspg
 * @description:
 * @author: youjp
 * @create: 2019-06-21 11:05
 **/
@Service
public class FileService {
    @Value("${image.uploadPath}")
    private String imageUploadPath;
    public List<FileBean> upload(HttpServletRequest request, MultipartFile[] files) {
        List<FileBean> filePath = new ArrayList<>();
        Calendar cal = Calendar.getInstance();
        try {
            for (MultipartFile file : files) {
                //todo 前端传递业务类型。判断能否上传
                String originalFilename = file.getOriginalFilename();
                String type = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."),file.getOriginalFilename().length());
                String fullFileName = System.currentTimeMillis() + type;
                String serveFileName = fullFileName.substring(0,fullFileName.lastIndexOf("."));
                String originalName = file.getOriginalFilename().substring(0, file.getOriginalFilename().lastIndexOf("."));
                Calendar calendar = Calendar.getInstance();
                int year = calendar.get(Calendar.YEAR);
                int month = calendar.get(Calendar.MONTH) + 1;
                int day = calendar.get(Calendar.DAY_OF_MONTH);
                String savePath = imageUploadPath + "/"+ year + "/" + month + "/"+ day + "/" + fullFileName;
                File target = new File(savePath);
                if (!target.getParentFile().exists()) {
                    target.getParentFile().mkdirs();
                }
                file.transferTo(target);
                //信息封装
                savePath =  "/"+ year + "/" + month + "/"+ day + "/" + fullFileName;
                FileBean fileBean = new FileBean(serveFileName,originalName,savePath,type);
                //返回文件在服务器的地址
                filePath.add(fileBean);
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        return filePath;
    }
    public void readFile(String fileName, String folder, HttpServletRequest request, HttpServletResponse response) {
        try {
            response.setContentType("image/jpeg");
            //发头控制浏览器不要缓存
            response.setDateHeader("expries", -1);
            response.setHeader("Cache-Control", "no-cache");
            response.setHeader("Pragma", "no-cache");
            String root_path = imageUploadPath + File.separator + folder + File.separator + fileName;
            ServletOutputStream outputStream = response.getOutputStream();
            FileInputStream fileInputStream = new FileInputStream(new File(root_path));
            BufferedInputStream bufferedInputStream = new BufferedInputStream(
                    fileInputStream);
            byte[] b = new byte[bufferedInputStream.available()];
            bufferedInputStream.read(b);
            outputStream.write(b);
            outputStream.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
    public void readFile(String url, HttpServletRequest request, HttpServletResponse response) {
        try {
            response.setContentType("image/jpeg");
            //发头控制浏览器不要缓存
            response.setDateHeader("expries", -1);
            response.setHeader("Cache-Control", "no-cache");
            response.setHeader("Pragma", "no-cache");
            String root_path = imageUploadPath + File.separator + url;
            ServletOutputStream outputStream = response.getOutputStream();
            FileInputStream fileInputStream = new FileInputStream(new File(root_path));
            BufferedInputStream bufferedInputStream = new BufferedInputStream(
                    fileInputStream);
            byte[] b = new byte[bufferedInputStream.available()];
            bufferedInputStream.read(b);
            outputStream.write(b);
            outputStream.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

FileBean.java

package com.hrt.zxxc.fxspg.file;
/**
 * @program: hrt-component2
 * @description:
 * @author: jp
 * @create: 2019-06-21 11:18
 **/
public class FileBean {
    private String serveFileName;
    private String originalFileName;
    private String url;
    private String type;
    public FileBean(String serveFileName, String originalFileName, String url, String type) {
        this.serveFileName = serveFileName;
        this.originalFileName = originalFileName;
        this.url = url;
        this.type = type;
    }
    public FileBean() {
    }
    public String getServeFileName() {
        return serveFileName;
    }
    public void setServeFileName(String serveFileName) {
        this.serveFileName = serveFileName;
    }
    public String getOriginalFileName() {
        return originalFileName;
    }
    public void setOriginalFileName(String originalFileName) {
        this.originalFileName = originalFileName;
    }
    public String getUrl() {
        return url;
    }
    public void setUrl(String url) {
        this.url = url;
    }
    public String getType() {
        return type;
    }
    public void setType(String type) {
        this.type = type;
    }
}

响应工具： Result.java

//
// Source code recreated from a .class file by IntelliJ IDEA
// (powered by Fernflower decompiler)
//
package com.hrt.framework.web.core;
import com.hrt.framework.commons.utils.JsonUtils;
import com.hrt.framework.web.core.enums.ResultEnum;
public class Result {
    private int code;
    private String msg;
    private Object data;
    public Result() {
    }
    public Result(int code, String msg) {
        this.code = code;
        this.msg = msg;
    }
    public Result(int code, String msg, Object data) {
        this.code = code;
        this.data = data;
    }
    public int getCode() {
        return this.code;
    }
    public void setCode(int code) {
        this.code = code;
    }
    public String getMsg() {
        return this.msg;
    }
    public void setMsg(String msg) {
        this.msg = msg;
    }
    public Object getData() {
        return this.data;
    }
    public void setData(Object data) {
        this.data = data;
    }
    public static Result success() {
        Result result = new Result();
        result.setCode(ResultEnum.SUCCESS.getCode());
        result.setMsg(ResultEnum.SUCCESS.getMsg());
        return result;
    }
    public static Result success(Object data) {
        Result result = new Result();
        result.setCode(ResultEnum.SUCCESS.getCode());
        result.setMsg(ResultEnum.SUCCESS.getMsg());
        result.setData(data);
        return result;
    }
    public static Result fail() {
        Result result = new Result();
        result.setCode(ResultEnum.FAIL.getCode());
        result.setMsg(ResultEnum.FAIL.getMsg());
        return result;
    }
    public static Result fail(Object data) {
        Result result = new Result();
        result.setCode(ResultEnum.FAIL.getCode());
        result.setMsg(ResultEnum.FAIL.getMsg());
        result.setData(data);
        return result;
    }
    public static Result internalError() {
        Result result = new Result();
        result.setCode(ResultEnum.INTERNAL_ERROR.getCode());
        result.setMsg(ResultEnum.INTERNAL_ERROR.getMsg());
        return result;
    }
    public static Result internalError(Object data) {
        Result result = new Result();
        result.setCode(ResultEnum.INTERNAL_ERROR.getCode());
        result.setMsg(ResultEnum.INTERNAL_ERROR.getMsg());
        result.setData(data);
        return result;
    }
    public static Result illegalArguments(Object data) {
        Result result = new Result();
        result.setCode(ResultEnum.ILLEGAL_ARGUMENTS.getCode());
        result.setMsg(ResultEnum.ILLEGAL_ARGUMENTS.getMsg());
        result.setData(data);
        return result;
    }
    public static Result illegalArguments() {
        Result result = new Result();
        result.setCode(ResultEnum.ILLEGAL_ARGUMENTS.getCode());
        result.setMsg(ResultEnum.ILLEGAL_ARGUMENTS.getMsg());
        return result;
    }
    public static Result missingParameter(Object data) {
        Result result = new Result();
        result.setCode(ResultEnum.MISSING_PARAMETER.getCode());
        result.setMsg(ResultEnum.MISSING_PARAMETER.getMsg());
        result.setData(data);
        return result;
    }
    public static Result forbidden() {
        Result result = new Result();
        result.setCode(ResultEnum.FORBIDDEN.getCode());
        result.setMsg(ResultEnum.FORBIDDEN.getMsg());
        return result;
    }
    public static Result custom(int code, String msg) {
        Result result = new Result();
        result.setCode(code);
        result.setMsg(msg);
        return result;
    }
    public static Result custom(int code, String msg, Object data) {
        Result result = new Result();
        result.setCode(code);
        result.setMsg(msg);
        result.setData(data);
        return result;
    }
    public String toString() {
        return JsonUtils.toJSONString(this);
    }
}

jsonUtils工具类

//
// Source code recreated from a .class file by IntelliJ IDEA
// (powered by Fernflower decompiler)
//
package com.hrt.framework.commons.utils;
import com.alibaba.fastjson.JSON;
import java.util.List;
public final class JsonUtils {
    private JsonUtils() {
    }
    public static <T> T parseObject(String text, Class<T> clazz) {
        return JSON.parseObject(text, clazz);
    }
    public static <T> List<T> parseArray(String text, Class<T> clazz) {
        return JSON.parseArray(text, clazz);
    }
    public static String toJSONString(Object object) {
        return JSON.toJSONString(object);
    }
    public static String toJSONString(Object object, boolean prettyFormat) {
        return JSON.toJSONString(object, prettyFormat);
    }
}

自定义响应枚举：

//
// Source code recreated from a .class file by IntelliJ IDEA
// (powered by Fernflower decompiler)
//
package com.hrt.framework.web.core.enums;
public enum ResultEnum {
    SUCCESS(200, "SUCCESS"),
    FAIL(201, "FAIL"),
    ILLEGAL_ARGUMENTS(202, "ILLEGAL_ARGUMENTS"),
    MISSING_PARAMETER(203, "MISSING_PARAMETER"),
    FORBIDDEN(403, "FORBIDDEN"),
    INTERNAL_ERROR(500, "INTERNAL_ERROR");
    private int code;
    private String msg;
    private ResultEnum(int code, String msg) {
        this.code = code;
        this.msg = msg;
    }
    public int getCode() {
        return this.code;
    }
    public String getMsg() {
        return this.msg;
    }
}

启动类将MultipartResolver注入容器

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.Bean;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
import org.springframework.web.multipart.MultipartResolver;
import org.springframework.web.multipart.commons.CommonsMultipartResolver;
import java.util.Collections;
@SpringBootApplication
public class PlatformApplication {
    public static void main(String[] args) {
        SpringApplication.run(PlatformApplication.class, args);
    }
  //解决跨域问题
  private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        // 1允许任何域名使用
        corsConfiguration.addAllowedOrigin("*");
        // 2允许任何头
        corsConfiguration.addAllowedHeader("*");
        // 3允许任何方法（post、get等）
        corsConfiguration.addAllowedMethod("*");
        return corsConfiguration;
    }
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig());
        return new CorsFilter(source);
    }
  @Bean
  public MultipartResolver multipartResolver(){
      CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver();
      multipartResolver.setMaxUploadSize(10000000);
      return multipartResolver;
  }
}

application.yml文件配置图片上传保存路径：

spring:
#  profiles:
   # active: dev
  application:
    name: fxspg-platform-server
  main:
    allow-bean-definition-overriding: true
  autoconfigure:
    exclude: org.springframework.boot.autoconfigure.web.servlet.MultipartAutoConfiguration
server:
  port: 9001
#文件上传路径
image:
  uploadPath: D:\fxspg\image
  logo: \logo
# 日志配置
logging:
  config: classpath:logback-spring.xml
  path: ./logs/${spring.application.name}
  lolevel:
    root: info

上传效果：

20200401134307494.png

选择多张图片以后，点击开始上传。查看

D:\fxspg\image 可以看到之前选中的多张图片已经上传。

20200401134307494.png

有兴趣的老爷，可以关注我的公众号【一起收破烂】，回复【006】获取2021最新java面试资料以及简历模型120套哦~



文章标签：
Java
JavaScript
前端开发
容器
收破烂的小熊猫
目录
相关文章
程序三两行
|
7月前
|
JavaScript
layui二级联动
layui二级联动
程序三两行
55 1
君临沂
|
数据库 数据安全/隐私保护
LayUI之树形菜单的实现
LayUI之树形菜单的实现
君临沂
94 0
不念那年晚春
|
前端开发 Java 开发者
LayUI系列（二）之树形菜单的实现
LayUI系列（二）之树形菜单的实现
不念那年晚春
179 0
兜里只有三分钱~
layui上传图片
layui上传图片
兜里只有三分钱~
61 0
我是咔咔
|
JavaScript
【layui】图片查看器
【layui】图片查看器
我是咔咔
417 0
【layui】图片查看器
杀死一只知更鸟debug
|
3月前
|
JavaScript 前端开发 开发者
Layui layer 弹出层的使用【笔记】
本文介绍了Layui的layer弹出层组件的使用方法，包括如何通过在线CDN引入Layui的CSS和JS文件，以及如何使用layer.open(options)开启弹出层和layer.close(index)关闭弹出层。文章详细说明了弹出层类型的分类、options选项的参数配置，以及回调函数的使用。通过示例代码，展示了如何创建不同类型的弹出层，包括对话信息框、页面层、内联框架层、加载层和tips层。
杀死一只知更鸟debug
146 0
讓丄帝愛伱
layui表单验证
layui表单验证
讓丄帝愛伱
273 0
爱你三千遍斯塔克
|
5月前
Elementplus如何在input中添加icons，表单中添加icon
Elementplus如何在input中添加icons，表单中添加icon
爱你三千遍斯塔克
169 1
破浪前进
|
7月前
|
移动开发 JavaScript 小程序
uView Textarea 文本域
uView Textarea 文本域
破浪前进
102 0
讓丄帝愛伱
layUI表单验证不生效的问题
layUI表单验证不生效的问题
讓丄帝愛伱
180 1

热门文章

最新文章

  • 1
    天猫精灵开放平台-之小百科测评
  • 2
    语义检索系统：基于Milvus 搭建召回系统抽取向量进行检索，加速索引
  • 3
    3D立方体图片切换动画
  • 4
    模态对话框和非模态对话框
  • 5
    java03
  • 6
    冒泡排序
  • 7
    Windows XP客户端加域操作手册上
  • 8
    微信 6.5.1 for iOS发布 可以在朋友圈分享相册中的视频
  • 9
    Chapter 1: Creating the GUI Form and Adding Widgets
  • 10
    【Mockplus教程】帐号和购买
  • 1
    「Mac畅玩鸿蒙与硬件42」UI互动应用篇19 - 数字键盘应用
    34
  • 2
    赋能加速AI应用交付，F5 BIG-IP Next for Kubernetes方案解读
    30
  • 3
    RAG分块策略：主流方法（递归、jina-seg）+前沿推荐（Meta-chunking、Late chunking、SLM-SFT）
    29
  • 4
    Python学习的自我理解和想法（2）
    30
  • 5
    Transformer图解
    36
  • 6
    API安全专题：如何有效应对新型Bot攻击？
    18
  • 7
    Selenium IDE：Web自动化测试的得力助手
    34
  • 8
    《docker高级篇（大厂进阶）：5.Docker-compose容器编排》包括是什么能干嘛去哪下、Compose核心概念、Compose使用三个步骤、Compose常用命令、Compose编排微服务
    51
  • 9
    24/7全时守护：AI视频监控技术的深度实现与应用分享
    43
  • 10
    《docker高级篇（大厂进阶）：6.Docker轻量级可视化工具Portainer》
    27

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月