jsp使用七牛云API和webuploader上传多组图片

jsp使用七牛云API和webuploader上传多组图片

介绍

前作:JavaWeb servlet jsp 使用七牛云API上传图片

使用mysql保存图片七牛云路径,在上传图片的时候直接上传到七牛云

前端使用了layui,图片多组上传使用了百度的WebUploader,本来想用swfupload的,但是10年前的东西实在不太行,我连跑都跑不起来…

另外我加入了log4j用来打日志

下面是简单演示

目录树

大致上是这样

├─sql
├─src
│  └─main
│      ├─java
│      │  └─top
│      │      └─sehnsucht
│      │          ├─dao
│      │          │  └─impl
│      │          ├─service
│      │          │  └─impl
│      │          ├─util
│      │          └─vo
│      └─webapp
│          ├─js
│          ├─layui
│          │  ├─css
│          │  │  └─modules
│          │  │      ├─laydate
│          │  │      │  └─default
│          │  │      └─layer
│          │  │          └─default
│          │  └─font
│          ├─WEB-INF
│          └─webuploader
│              ├─dist

webuploader里面只有dist用到

遇到的问题

上传组件的选择问题

swfupload实在是用不了,报错全部解决也不行,搜来搜去选择了WebUploader,至少是国人写的,好歹文档是中文,不至于看不懂

进度条

看着官网的示例有进度条,但是我这里没有,发现是css的问题,然后去百度加进去就好了

多线程

用这个组件后台会自动往你写的那个地址传东西,这个是并发的,如果不加锁结果老是不对,所以我在UploadServlet那里加了锁

前端界面

使用了layui来构建前端,包括日期组件也是layui自带的,挺好用的,用那个表单组件的时候差点卡住了,不过问题不大,看文档看懂就好了

数据库

从浏览器选择的日期传到后端再进行数据库的查询

关键代码

我将完整代码放到了
https://gitee.com/hex-cxm/jspQiNiu

有兴趣的可以打个star

我这里只放关键代码,不然太多了

UserPhotoDaoImpl

package top.sehnsucht.dao.impl;

import org.apache.log4j.Logger;
import top.sehnsucht.dao.UserPhotoDao;
import top.sehnsucht.util.DBUtil;
import top.sehnsucht.vo.Photo;
import top.sehnsucht.vo.UserInfo;
import top.sehnsucht.vo.UserPhoto;

import java.io.FileInputStream;
import java.sql.*;
import java.util.ArrayList;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;

/**
 * @Description:
 * @Author: Cai
 * @CreateTime: 2021/11/12
 */

public class UserPhotoDaoImpl implements UserPhotoDao {
   
    private Logger logger = Logger.getLogger(this.getClass());

    /**
     * 返回ArrayList<ArrayList<String>>,方便转成json传到前端
     * 只有用户信息
     *
     * @return
     */
    @Override
    public ArrayList<Map<String, String>> getAllUser() {
   
        Connection conn = null;
        PreparedStatement ps = null;
        FileInputStream in = null;
        ResultSet rs = null;
        ArrayList<Map<String, String>> arrs = new ArrayList<>();
        try {
   
            conn = DBUtil.getConn();
            String sql = "select id,username,birthday from userinfo order by id";
            ps = conn.prepareStatement(sql);
            rs = ps.executeQuery(sql);
            while (rs.next()) {
   
                Map<String, String> map = new HashMap();
                Integer id = rs.getInt(1);
                String username = rs.getString(2);
                java.util.Date birthday = rs.getDate(3);
                map.put("id", id.toString());
                map.put("username", username);
                map.put("birthday",birthday.toString());
                arrs.add(map);
            }
        } catch (Exception e) {
   
            e.printStackTrace();
        } finally {
   
            DBUtil.closeConn(conn);
            if (null != ps) {
   
                try {
   
                    ps.close();
                } catch (SQLException e) {
   
                    e.printStackTrace();
                }
            }
        }
        return arrs;
    }

    /**
     * 添加photo到数据库中
     *
     * @param userPhotos
     */
    @Override
    public void addUserAndPhoto(ArrayList<UserPhoto> userPhotos) {
   
        Connection conn = null;
        PreparedStatement ps = null;
        try {
   
            conn = DBUtil.getConn();
            for (int i = 0; i < userPhotos.size(); i++) {
   
                String sql = "insert into userphoto (userid, photoname, photourl) values (?,?,?)";
                ps = conn.prepareStatement(sql);
                ps.setInt(1, userPhotos.get(i).getUserid());
                ps.setString(2, userPhotos.get(i).getPhotoName());
                ps.setString(3, userPhotos.get(i).getPhotoUrl());
                int count = ps.executeUpdate();
                if (count > 0) {
   
                    System.out.println("插入成功！");
                } else {
   
                    System.out.println("插入失败！");
                }
            }
        } catch (Exception e) {
   
            e.printStackTrace();
        } finally {
   
            DBUtil.closeConn(conn);
            if (null != ps) {
   
                try {
   
                    ps.close();
                } catch (SQLException e) {
   
                    e.printStackTrace();
                }
            }
        }
    }

    /**
     * 根据id查找图片集合
     *
     * @param id
     * @return
     */
    @Override
    public ArrayList<UserPhoto> getPhotoByUserId(Integer id) {
   
        Connection conn = null;
        PreparedStatement ps = null;
        FileInputStream in = null;
        ResultSet rs = null;
        ArrayList<UserPhoto> userPhotos = new ArrayList<UserPhoto>();
        try {
   
            conn = DBUtil.getConn();
//            String sql = "select * from photo where id = " + id;
            String sql = "select userid, photoname, photourl from userphoto where userid = " + id;
            ps = conn.prepareStatement(sql);
            rs = ps.executeQuery(sql);
            while (rs.next()) {
   
                UserPhoto userPhoto = new UserPhoto(rs.getInt(1),rs.getString(2),rs.getString(3));
                userPhotos.add(userPhoto);
            }
        } catch (Exception e) {
   
            e.printStackTrace();
        } finally {
   
            DBUtil.closeConn(conn);
            if (null != ps) {
   
                try {
   
                    ps.close();
                } catch (SQLException e) {
   
                    e.printStackTrace();
                }
            }
        }
        return userPhotos;
    }

    /**
     * 插入用户,返回用户id(主键)
     *
     * @param userInfo
     * @return
     */
    @Override
    public Integer addUser(UserInfo userInfo) {
   
        Connection conn = null;
        PreparedStatement ps = null;
        Integer ansId = null;
        try {
   
            conn = DBUtil.getConn();
            String sql = "insert into userinfo (username,birthday) values(?,?)";
            ps = conn.prepareStatement(sql, Statement.RETURN_GENERATED_KEYS);
            ps.setString(1, userInfo.getUsername());
            ps