html实现多张图片上传功能
前端接收多个图片并渲染在页面上,点击保存可以将图片存储到制定路径,并将访问地址写入数据库。
界面:
前端:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试图片上传功能</title>
<script src="../AmazeUI-2.4.2/assets/js/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.9/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="success">
<!--图片上传-->
<div>图片上传</div>
<div>
<div id="uploadBox"></div>
<div v-show="showAddBtn">
<input type="file" name="file" id="inputs" accept="image/*" class="fileTest" multiple="multiple" onchange="addImg(this, index)"/>
</div>
</div>
<!--按钮-->
<!--将图片保存到固定的商品中-->
<button @click="addItemImg('230421GPM10H42Y8')">保存</button>
<button>取消</button>
</div>
<script type="text/javascript " src="../js/app.js"></script>
<script src="../js/jquery.qrcode.min.js" type="text/javascript"></script>
<script type="text/javascript">
var index = new Vue({
el: "#success",
data: {
userIsLogin: false,
userInfo: {},
showAddBtn: true,
img: [],//图片数组
i: 0//数组下标
},
created() {
// 通过cookie判断用户是否登录
this.judgeUserLoginStatus();
},
methods: {
// 通过cookie判断用户是否登录
judgeUserLoginStatus() {
var userCookie = app.getCookie("user");
if (
userCookie != null &&
userCookie != undefined &&
userCookie != ""
) {
var userInfoStr = decodeURIComponent(userCookie);
// console.log(userInfo);
if (
userInfoStr != null &&
userInfoStr != undefined &&
userInfoStr != ""
) {
var userInfo = JSON.parse(userInfoStr);
// 判断是否是一个对象
if ( typeof(userInfo) == "object" ) {
this.userIsLogin = true;
// console.log(userInfo);
this.userInfo = userInfo;
} else {
this.userIsLogin = false;
this.userInfo = {};
}
}
} else {
this.userIsLogin = false;
this.userInfo = {};
}
},
//添加商品图片
addItemImg(itemId){
var imgList = this.img;
for(var i=0; i<imgList.length; i++){
let f = imgList[i];
let multiForm = new FormData();//创建一个form对象
multiForm.append('file', f, f.name);//向form表单添加数据
var userInfo = this.userInfo;
// 请求后端获得最新数据
var serverUrl = app.serverUrl;
axios.defaults.withCredentials = true;
axios.post(
serverUrl + '/items/saveImgs?itemId=' + itemId + '&index=' + i,
multiForm,
{
headers: {
'Content-Type': 'multipart/form-data',
'headerUserId': userInfo.id,
'headerUserToken': userInfo.userUniqueToken
}
})
.then(res =>{
if(res.data.status == 200){
console.log("Image Ok");
}else{
console.log(res.data.msg);
}
})
}
}
}
});
//实现图片上传功能
function addImg(that, data) {
var img = data.img;//获取全局变量
var fil = that.files[0];
reads(fil, data);//渲染在页面上
img.push(fil);//写入全局变量img
data.img = img;//将添加元素后的数组赋值给全局变量
if($("#uploadBox").children().length >= 4) { //判断图片的数量,数量不能超过5张
data.showAddBtn = false;
} else {
data.showAddBtn = true;
}
}
function removethis(i, data){
// console.log('img: '+data.img);//测试输出
$("#img"+i+"").remove();
var img = data.img;
img.splice(i, 1);//删除下标i的元素
data.img = img;//将删除后的数组同步到全局img
if($("#uploadBox").children().length<5){//最多上传5张图片
data.showAddBtn = true;
}
}
function reads(fil, data) {
var reader = new FileReader();
var i = data.i;//获取下标
reader.readAsDataURL(fil);
reader.onload = function() {
document.getElementById("uploadBox").innerHTML +=
"<div id='img"+i+"' id='uploadImg'>" +
"<img src='" + reader.result + "' style='width: 10%; margin-left:2%; float: left'>" +
"<img style='width: 2%; float: left' src='../images/delete.png' οnclick='removethis("+i+", index)'>" +
"</div>";
i++;
data.i = i;//将下标赋值给全局变量 οnclick='removethis("+i+", "+data+")'
}
}
</script>
</body>
</html>
后端:
@Api(value = "商品接口", tags = {"商品信息展示的相关接口"})
@RestController
@RequestMapping("items")
public class ItemsController extends BaseController{
@Autowired
private ItemService itemService;
//保存商品图片信息
@ApiOperation(value = "保存商品图片信息", notes = "保存商品图片信息", httpMethod = "POST")
@PostMapping("/saveImgs")
public IMOOCJSONResult saveImgs(
@ApiParam(name = "itemId", value = "商品id", required = true)
@RequestParam String itemId,
@ApiParam(name = "index", value = "下标 0 1 2...", required = true)
@RequestParam Integer index,
@ApiParam(name = "file", value = "商品图片", required = true)
MultipartFile file,
HttpServletRequest request,
HttpServletResponse response
){
//System.out.println("itemId: "+itemId);//itemId: 2304229DP7FT0YCH
//System.out.println("file: "+file);//file: org.springframework.web.multipart.support.StandardMultipartHttpServletRequest$StandardMultipartFile@45c2c283
//定义图片保存的地址
String fileSpace = "\\workspaces/images/foodie/items";//设置文件夹路径
//在路径上为每一个商品增加一个itemId,用于区分不同商品
String uploadPathPrefix = File.separator + itemId;//\230421GPM10H42Y8
//上传文件
if(file != null){
FileOutputStream fileOutputStream = null;
try{
//获取文件上传的文件名
String fileName = file.getOriginalFilename();
if(StringUtils.isNotBlank(fileName)){
//文件传重命名
String fileNameArr[] = fileName.split("\\.");
//获取文件后缀名
String suffix = fileNameArr[fileNameArr.length - 1];
if(!suffix.equalsIgnoreCase("png") &&
!suffix.equalsIgnoreCase("jpg") &&
!suffix.equalsIgnoreCase("jpeg")){
return IMOOCJSONResult.errorMsg("图片格式不正确!");
}
//img-230421GPM10H42Y8-0.jpg
String newFileName = "img-" + itemId + "-" + index + "." + suffix;
//上传的头像最终保存的位置
String finalImgPath = fileSpace + uploadPathPrefix + File.separator + newFileName;
//\workspaces/images/foodie/items\230421GPM10H42Y8\img-230421GPM10H42Y8-0.jpg
//用于提供给web服务访问的地址
uploadPathPrefix += ("/" + newFileName);
File outFile = new File(finalImgPath);
if(outFile.getParentFile() != null){
//创建文件夹
outFile.getParentFile().mkdirs();//生成多级目录
}
//文件输出保存到目录
fileOutputStream =new FileOutputStream(outFile);
InputStream inputStream = file.getInputStream();
IOUtils.copy(inputStream, fileOutputStream);//上传文件
}
}catch (IOException e){
e.printStackTrace();
}finally {
try{
if(fileOutputStream != null){
fileOutputStream.flush();
fileOutputStream.close();
}
}
catch (IOException e){
e.printStackTrace();
}
}
}
else {
return IMOOCJSONResult.errorMap("文件不能为空!");
}
//获取图片服务器地址
String imageServerUrl = "http://localhost:8088/foodie/items";
String finalItemUrl = imageServerUrl + uploadPathPrefix;
//http://localhost:8088/foodie/items\230421GPM10H42Y8/img-230421GPM10H42Y8-0.jpg
//更新商品图片到数据库
itemService.saveItemImgInfo(itemId, finalItemUrl, index);//index表示图片顺序
return IMOOCJSONResult.ok();
}
}