关键词：
文章目录
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.setObject(2, userInfo.getBirthday());
int count = ps.executeUpdate();
if (count > 0)
System.out.println("插入成功！");
ResultSet rs = ps.getGeneratedKeys();
if (rs.next())
//获取主键,设置了主键自增
ansId = rs.getInt(1);
else
System.out.println("插入失败！");
catch (Exception e)
e.printStackTrace();
finally
DBUtil.closeConn(conn);
if (null != ps)
try
ps.close();
catch (SQLException e)
e.printStackTrace();
return ansId;
/**
* 根据要求查看用户
* @param name
* @param startDate
* @param endDate
* @return
*/
@Override
public ArrayList<Map<String, String>> getSomeUser(String name, String startDate, String endDate)
Connection conn = null;
PreparedStatement ps = null;
FileInputStream in = null;
ResultSet rs = null;
ArrayList<Map<String, String>> arrs = new ArrayList<>();
logger.debug("正常进入");
try
conn = DBUtil.getConn();
String sql = "select id,username,birthday from userinfo where ";
if (name != null && !name.equals(""))
sql += " username like '%" + name + "%' ";
else
sql += " username like '%' ";
if (startDate!= null)
sql += " and birthday >= '" + java.sql.Date.valueOf(startDate) + "'";
if (endDate!= null)
sql += " and birthday <= '" + java.sql.Date.valueOf(endDate) + "'";
sql += " order by id ";
logger.info("sql: " + sql);
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;
UploadServlet
package top.sehnsucht;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import top.sehnsucht.util.Qiniu;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.IOException;
import java.util.Iterator;
import java.util.List;
import java.util.concurrent.locks.Lock;
import java.util.concurrent.locks.ReentrantLock;
import org.apache.log4j.Logger;
/**
* @Description:
* @Author: Cai
* @CreateTime: 2021/10/29
*/
public class UploadServlet extends HttpServlet
private Logger logger=Logger.getLogger(this.getClass());
private Lock lock = new ReentrantLock();
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException
lock.lock();
try
req.setCharacterEncoding("utf-8");
resp.setCharacterEncoding("utf-8");
resp.setContentType("text/html; charset=UTF-8");
logger.info("单次请求" + req);
//判断文件是否可以上传
boolean isMultipart = ServletFileUpload.isMultipartContent(req);
//可以上传,有问题就报异常
if (isMultipart)
//创建一个FileItem工厂，通过工厂创建文件上传核心组件ServletFileUpload对象
ServletFileUpload upload = new ServletFileUploadweb上传图片到七牛云服务器(代码片段)
本文通过javaweb的使用,把要上传的图片通过浏览器上传到服务器上面.`文本仅供参考,可能出现很多不合理;`1创建对应的jsp页面:下面是jsp下面的对应的from表单,上传文件用的那么ImgFiles的属性名称,同样你可以使用其他的,或者... 查看详情
初试“七牛云”--零基础运用七牛云配合ueditor实现图片的上传和浏览（.net篇）
...，第一步当然是先百度一下。。。看了N个关于七牛云的使用的帖子，表示还是蒙圈的，看懂了一部分，但是不系统，理解的不连贯，作为一个凡是要弄个特别明白的死脑筋，于是开始从头看是研究文档。。。。（以下都是来自ht... 查看详情
七牛云上传图片名添加前缀
先来说下自己遇到的问题吧。项目使用七牛云来存储用户头像，大致流程：客户端从后台获取到uploadToken和domain，然后客户端通过安卓SDk上传图片。问题：为了给图片分类，现在需要把客户端上传的头像图片加一个前缀路径。例... 查看详情
thinkphp6上传图片七牛云如何上传文件到七牛云对象储存cos
...家如何上配置ThinkPHP6上传文件至七牛云.然后我们就可以使用$url=Qiniu::upload($filePath,$filename);传入文件的相对路径或绝对路径加上文件名,在文件上传成功后自动又将图片上传至七牛云~ 查看详情
kindeditor加入七牛云上传
...解决不支持重定向的请求方式，比如小程序上传 本次使用的是七牛云phpsdk；composerrequireqiniu/php-sdk 在Kindeditor/php下添加config.php主要是配置参数 查看详情
七牛云实现js上传
七牛云的官方API写的一塌糊涂。最主要的，还是版本兼容的问题。 一、引入文件引入了两个文件：1.jquery-1.10.2.min.js2.plupload.full.min.js3.qiniu.js版本太重要了。我提供了下载地址。二.html代码<pclass="tip1">本demo实现的图片预览... 查看详情
node七牛云上传文件
七牛云储存nodejs qiniu模块测试的一个实例constqiniu=require(‘qiniu‘)//需要填写你的AccessKey和SecretKeyvaraccessKey=‘‘varsecretKey=‘‘varmac=newqiniu.auth.digest.Mac(accessKey,secretKey)//要上传的空间名buketvarbucket=‘image‘va 查看详情
如何将图片上传到七牛云平台？
...广受欢迎的“七牛”云平台。以及分步骤给大家介绍如何使用七牛。各位可以使用我的邀请链接注册：https://portal.qiniu.com/signup?code=3l7nsvonfkxn6拜托！！！我们这里添加的对象存储空间叫做“gougouavatar”其中的ACCESS_KEY和SECRET_KEY两... 查看详情
七牛云文件上传助手(代码片段)
...没有一个好的上传工具，于是写了这样的一个工具。效果使用方法下载程序包点击下载解压后直接在config.json文件里面天上自己七牛云相关的信息。config"access_key":"************"," 查看详情
如何利用”七牛云”在ueditor实现图片的上传和浏览
...来操作的。现在我重新整理一下实现的步骤：1.注册一个七牛云用户2. 在七牛云网站中创建一个空间来存储图片，存储区域选择华东或是华北，请先记得上传到华东1 查看详情
php表单上传图片到七牛云存储并返回地址……求具体流程～有代码更好
...篇记录，如下原文地址：http://cuiqingcai.com/?p=157网上关于七牛云存储的教程除了官网上的API文档，其他的资料太少了。研究了下API之后，现在已经能实现图片的上传和下载及上传之后的重定向。首先本篇文章实现的功能如下：1.利... 查看详情
七牛云对象存储java使用
...心功能及服务创建对象存储空间上传文件测试JavaSDK简介使用SDK上传文件下载文件测试对象存储服务简介七牛云海量存储系统（KODO）是自主研发的非结构化数据存储管理平台，支持中心和边缘存储。平台经过多年大规... 查看详情
前端上传图片头像到七牛云格式变成text
参考技术A流程：七牛云后台的对象存储功能，nodejs后台生成七牛云的token，前端利用elementUI/ice的upload组件，文件名和token作为参数请求到七牛云后台。配置已经完成，写接口用的是express，koa同理，主要做法是先接收前端的图片... 查看详情
ueditor上传图片到七牛云存储（formapi,java）
转：http://my.oschina.net/duoduo3369/blog/174655ueditor上传图片到七牛云存储ueditor结合七牛传图片七牛的试炼开发前的准备与注意事项说明Let‘srock与ueditor结合前的准备工作首先从表单开始生成token建立图片空间生成token上传流程集成ueditor... 查看详情
七牛云javaapi使用
1、引入jar<dependency><groupId>com.qiniu</groupId><artifactId>qiniu-java-sdk</artifactId><version>7.2.3</version></dependency>2、上传文件packagecom.hui.qiniu;importcom.qiniu.common.QiniuException;importcom.qiniu.http.Response;importcom.qiniu.st... 查看详情
七牛云上传图片报400错误的一些小坑
...问题，上传图片还是报code400，最后发现是因为后端申请七牛云的时候填写的服务器是华南区而SDK里默认是华东区，导致上传失败。步骤一：先搜索七牛SDK里的zone0（图一）步骤二：查看后台申请的区域（图三）步骤三：把（图二... 查看详情
golang七牛云上传示例(代码片段)
vue3+typescript上传文件到七牛云
...始了各种找资料，看文档，看示例，终于搞定了。项目中使用的是vite.js构建的，而且用的是typescript，网上的示例几乎没有，下面来一 查看详情