springboot+vue 交互上传多张图片案例
vue前端使用element框架
使用了var formData = new FormData();处理数据传输到后端处理
效果图附上
页面代码
UPLOAD
SUPPORT JEP/PNG FILEAPPEND
UPLOAD
SUPPORT JEP/PNG FILEAPPEND
UPLOAD
SUPPORT JEP/PNG FILEAPPEND
新增
修改
重置
js代码
前端调用api
import request from '@/utils/request'
//自己封装的请求方式
export function addUser(data) {
return request({
//你的后台请求地址 https://api-dev/login/login
url: '/system/adUser/addSystemAdUserList',
method: 'post',
data: data
})
}
后端请求代码写法
控制器
通过HttpServletRequest 获取请求的参数
//新增 修改 联系人
@RequestMapping(value = "/addSystemAdUserList")
@ResponseBody
@ApiOperation(value = "商家添加信息,名称,电话,邮箱,logo图片,账户,密码", notes = "商家添加信息,名称,电话,邮箱,执照图片,账户,密码’", httpMethod = "POST")
@OperationLogAnnotation(operModul = "商家管理模块-新增或者修改商家信息",operType = "新增或者修改",operDesc = "商家添加信息,名称,电话,邮箱,logo图片,账户,密码")
public Result addSysAdUser(HttpServletRequest request) throws ValidateException {
Result result=iAdUserService.addSysAdUser(request);
return result;
}实现层写逻辑代码
package com.noah_solutions.funshare.service.impl;
import com.alibaba.fastjson.JSON;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.noah_solutions.funshare.common.util.ImgPath;
import com.noah_solutions.funshare.common.util.Md5Utils;
import com.noah_solutions.funshare.common.util.MyImgUtil;
import com.noah_solutions.funshare.core.error.ValidateException;
import com.noah_solutions.funshare.core.request.Result;
import com.noah_solutions.funshare.core.validate.BaseValidator;
import com.noah_solutions.funshare.core.validate.Va;
import com.noah_solutions.funshare.core.validate.Validator;
import com.noah_solutions.funshare.entity.AdUser;
import com.noah_solutions.funshare.mapper.AdUserMapper;
import com.noah_solutions.funshare.pojo.po.system.AdUserPo;
import com.noah_solutions.funshare.pojo.vo.system.AdUserVo;
import com.noah_solutions.funshare.service.IAdUserService;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import javax.servlet.http.HttpServletRequest;
import java.util.ArrayList;
import java.util.List;
/**
*
* 服务实现类
*
*
* @author lizhi
* @since 2021-01-30
*/
@Service
public class AdUserServiceImpl extends ServiceImpl implements IAdUserService {
//图片保存地址
@Autowired
private ImgPath filePath;
@Autowired
private IAdUserService iAdUserService;
@Override
public Result uploadBusinessLogo(List files, String filePathUploadurl, Integer userId) {
Result result = Result.createSuccessResult();
MultipartFile file = null;
//先设置一个StringBuffer路径
StringBuffer buf = new StringBuffer();
//查找用户是否有图片
AdUser user = new AdUser().selectById(userId);
if(user!=null) {
//判断图片是否为空
if (user.getBusinessLogo() != null && user.getBusinessLogo() != "") {
//图片张数
for (int i = 0; i < user.getBusinessLogo().split(",").length; i++) {
//删除图片
MyImgUtil.deleteImg(filePathUploadurl, user.getBusinessLogo().split(",")[i]);
}
}
}
//新增图片
for (int i = 0; i < files.size(); ++i) {
file = files.get(i);
if (!file.isEmpty()) {
try {
//上传图片
String path = MyImgUtil.installImgList("businessLogo", file, filePathUploadurl);
//集合储存
//最后一条数据
if (files.size() == i) {
buf.append(path);
} else {
buf.append(path + ",");
}
} catch (Exception e) {
result.setCode(-1);
result.setMessage("图片上传失败 " + i + " => " + e.getMessage());
return result;
}
} else {
result.setCode(-1);
result.setMessage("图片上传失败 " + i + " because the file was empty.");
return result;
}
}
//新增或者修改到数据库
AdUser adUser = new AdUser();
adUser.setBusinessLogo(buf.toString());
adUser.setId(userId);
adUser.updateById();
result.setCode(1);
result.setMessage("图片上传成功");
return result;
}
@Override
@Transactional
public Result uploadSurroundingsLogo(List files, String filePathUploadurl, Integer userId) {
Result result = Result.createSuccessResult();
MultipartFile file = null;
//先设置一个StringBuffer路径
StringBuffer buf = new StringBuffer();
//查找用户是否有图片
AdUser user = new AdUser().selectById(userId);
if (user != null) {
//判断图片是否为空
if (user.getSurroundingsLogo() != null && user.getSurroundingsLogo() != "") {
//图片张数
for (int i = 0; i < user.getSurroundingsLogo().split(",").length; i++) {
//删除图片
MyImgUtil.deleteImg(filePathUploadurl, user.getSurroundingsLogo().split(",")[i]);
}
}
}
//新增图片
for (int i = 0; i < files.size(); ++i) {
file = files.get(i);
if (!file.isEmpty()) {
try {
//上传图片
String path = MyImgUtil.installImgList("surroundingsLogo", file, filePathUploadurl);
//集合储存
//最后一条数据
if (files.size() == i) {
buf.append(path);
} else {
buf.append(path + ",");
}
} catch (Exception e) {
result.setCode(-1);
result.setMessage("图片上传失败 " + i + " => " + e.getMessage());
return result;
}
} else {
result.setCode(-1);
result.setMessage("图片上传失败 " + i + " because the file was empty.");
return result;
}
}
//新增或者修改到数据库
AdUser adUser = new AdUser();
adUser.setSurroundingsLogo(buf.toString());
adUser.setId(userId);
adUser.updateById();
result.setCode(1);
result.setMessage("图片上传成功");
return result;
}
@Override
public Result uploadLicenseLogo(List files, String filePathUploadurl, Integer userId) {
Result result = Result.createSuccessResult();
MultipartFile file = null;
//先设置一个StringBuffer路径
StringBuffer buf = new StringBuffer();
//查找用户是否有图片
AdUser user = new AdUser().selectById(userId);
if (user != null) {
//判断图片是否为空
if (user.getLicenseLogo() != null && user.getLicenseLogo() != "") {
//图片张数
for (int i = 0; i < user.getLicenseLogo().split(",").length; i++) {
//删除图片
MyImgUtil.deleteImg(filePathUploadurl, user.getLicenseLogo().split(",")[i]);
}
}
}
//新增图片
for (int i = 0; i < files.size(); ++i) {
file = files.get(i);
if (!file.isEmpty()) {
try {
//上传图片
String path = MyImgUtil.installImgList("LicenseLogo", file, filePathUploadurl);
//集合储存
//最后一条数据
if (files.size() == i) {
buf.append(path);
} else {
buf.append(path + ",");
}
} catch (Exception e) {
result.setCode(-1);
result.setMessage("图片上传失败 " + i + " => " + e.getMessage());
return result;
}
} else {
result.setCode(-1);
result.setMessage("图片上传失败 " + i + " because the file was empty.");
return result;
}
}
//新增或者修改到数据库
AdUser adUser = new AdUser();
adUser.setLicenseLogo(buf.toString());
adUser.setId(userId);
adUser.updateById();
result.setCode(1);
result.setMessage("图片上传成功");
return result;
}
@Override
public Result addSysAdUser(HttpServletRequest request) throws ValidateException {
List vaList = new ArrayList<>();
Result result = Result.createSuccessResult();
// AdUser user=new AdUser();
MultipartHttpServletRequest params = (MultipartHttpServletRequest) request;
List businessLogo = ((MultipartHttpServletRequest) request).getFiles("businessLogo");
List surroundingsLogo = ((MultipartHttpServletRequest) request).getFiles("surroundingsLogo");
List LicenseLogo = ((MultipartHttpServletRequest) request).getFiles("LicenseLogo");
String userString = params.getParameter("user");
AdUser user = JSON.parseObject(userString, AdUser.class);
vaList.add(new Va(user.getName(), Validator.NOT_BLANK, "用户名"));
BaseValidator.toValitator(vaList);//开始验证
user.setPassword(Md5Utils.getMD5(user.getPassword()));
//查詢是否有重複號碼
QueryWrapper queryWrapper = new QueryWrapper();
queryWrapper.eq("phone", user.getPhone());
AdUser adUser = new AdUser().selectOne(queryWrapper);
System.out.println("files" + businessLogo);
//接收前端传过来的字段
//设置图片路径
final String filePathUploadurl = filePath.getUploadurl();
if (adUser != null && user.getId() != adUser.getId()) {
result.setCode(-1);
result.setMessage("手機號碼重複！");
return result;
}
Boolean ifOk;
if (user.getId() == null) {
ifOk = user.insert();
result.setMessage("新增成功");
} else {
ifOk = user.updateById();
result.setMessage("修改成功");
if (!ifOk) {
result.setCode(-1);
result.setMessage("修改失敗");
return result;
}
}
result = iAdUserService.uploadBusinessLogo(businessLogo, filePathUploadurl, user.getId());
result = iAdUserService.uploadSurroundingsLogo(surroundingsLogo, filePathUploadurl, user.getId());
result = iAdUserService.uploadLicenseLogo(LicenseLogo, filePathUploadurl, user.getId());
result.setCode(1);
return result;
}
@Override
public IPage selectSystemAdUserList(IPage vo, AdUserPo po) {
return super.baseMapper.selectSystemAdUserList(vo,po);
}
}
MyImgUtil工具类
package com.noah_solutions.funshare.common.util;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
/**
* author: L-z
* date: 2019/5/5 ${time}.
*/
public class MyImgUtil {
//单张图片上传
public static String installImg(String path, MultipartFile file, String imgPath){
try {
File file1 = new File(imgPath);
if (!file1.exists()) {
file1.mkdirs();
}
String newPath = FileUtil.getCurFile();//每半月创建一个文件夹
String fileName =System.currentTimeMillis()+".png";
String mkdirPath = imgPath+path+newPath;
File targetFile = new File(mkdirPath, fileName);
if(targetFile.exists()){
new File(path).delete();
}
targetFile.mkdirs();//
file.transferTo(targetFile);
return path+newPath+fileName;
}catch (Exception e){
System.out.println("图片上传失败");
e.printStackTrace();
return "";
}
}
public static void deleteImg(String imgs,String path){
try{
FileUtil.deleteFile( path+imgs);
}catch (Exception e){
e.printStackTrace();
}
}
//多张图片上传
public static String installImgList(String path, MultipartFile file,String imgPath){
try {
File file1 = new File(imgPath);
if (!file1.exists()) {
file1.mkdirs();
}
String newPath = FileUtil.getCurFile();//每半月创建一个文件夹
String fileName =System.currentTimeMillis()+".png";
String mkdirPath = imgPath+path+newPath;
File targetFile = new File(mkdirPath, fileName);
if(targetFile.exists()){
new File(path).delete();
}
targetFile.mkdirs();//
file.transferTo(targetFile);
return path+newPath+fileName;
}catch (Exception e){
System.out.println("图片上传失败");
e.printStackTrace();
return "";
}
}
}