【无标题】

吃土豆的猫~

于 2023-04-22 16:24:17 发布

阅读量118

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/m0_46657506/article/details/130306384

版权

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();
    }
}