版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_35529931/article/details/82052748
对于图片的新增,有封装好的方法,只是借用了而已。
HTML的方面:
<div class="layui-row">
<div class="layui-col-xs12">
<div class="grid-demo">
<div class="layui-form-item">
<label class="layui-form-label">维修故障单:</label>
<div class="layui-input-block">
<div class="layui-upload">
<button type="button" class="layui-btn" id="maintain-fault-image">图片上传</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="layui-row" style="width: 700px;">
<div class="layui-col-xs12">
<div class="grid-demo">
<div class="layui-form-item">
<div class="layui-upload">
<div>
<div class="layui-upload-list" id="maintain-fault-imagePreview"></div>
</div>
</div>
</div>
</div>
</div>
</div>
2。在JS方面,借鉴了项目的一个函数
// 保存维修故障图片
var maintainfaultImage = [];//存放图片预览时的file文件
//初始化添加车辆时上传图片的环境
$("#maintain-fault-imagePreview").empty();
upload.render({
elem: '#maintain-fault-image'//“选择文件”按钮的ID
, auto: false//不自动上传设置
, accept: 'images'//允许上传的文件类型
, exts: 'jpg|png|gif|bmp|jpeg'//设置智能上传图片格式文件
, size: 0.2 * 1024 //最大允许上传的文件大小
, multiple: true//设置是否多个文件上传
, number: 3
, choose: function (obj) {//选中图片后
if (maintainfaultImage.length >= 3) {
return;
}
//将每次选择的文件追加到文件队列
var files = obj.pushFile();
//预读本地文件,如果是多文件,则会遍历。(不支持ie8/9)
obj.preview(function (index, file, result) {
maintainfaultImage.push(result);
if (file.size > 0 && $('#maintain-fault-imagePreview').find('img').length === 0) {
$('#maintain-fault-imagePreview').empty();
}
// 添加图片
$('#maintain-fault-imagePreview').append('<div class="image-container" id="container-' + index + '"><div class="delete-css"><button id="upload_img_' + index + '" class="layui-btn layui-btn-danger layui-btn-xs">删除</button></div>' +
'<img id="showImg-' + index + '" style="width: 150px; margin:10px;margin-left:15px;cursor:pointer;"src="' + result + '" alt="' + file.name + '"></div>');
//删除某一张图片
$("#upload_img_" + index).bind('click', function () {
delete files[index];
$("#container-" + index).remove();
maintainfaultImage.splice(index, 1);//删除数组中的图片
});
//某图片放大预览
$("#showImg-" + index).bind('click', function () {
var width = $("#showImg-" + index).width();
var height = $("#showImg-" + index).height();
var scaleWH = width / height;
var bigH = 600;
var bigW = scaleWH * bigH;
if (bigW > 900) {
bigW = 900;
bigH = bigW / scaleWH;
}
// 放大预览图片
layer.open({
type: 1,
title: false,
closeBtn: 1,
shadeClose: true,
area: [bigW + 'px', bigH + 'px'], //宽高
content: "<img width='" + bigW + "' height='" + bigH + "' src=" + result + " />"
});
});
});
}
, done: function (res) {
if (res) {
layer.close(index);
}
}
});
在新增的图片时候,只需要将这个DTO传给后台,就可以实现了。
$scope.modifymaintainDTO.imageMaintainFaults = modifyMaintainfaultImage;
后台方面的做法是,将上传到云服务器的图片转换为url,把url保存到数据库中,方便其他操作。
// 保存图片
try {
List<String> maintainsUrl = microsoftImageUtils.uploadServeralImg(maintainDTO.getImageMaintains(), maintainDTO.getUuid() + "维修清单");
for (String maintainUrl : maintainsUrl) {
ImageMaintainPO imageMaintainPO = new ImageMaintainPO();
imageMaintainPO.setUuid(UuidUtils.getUuid());
imageMaintainPO.setMaintain_id(maintainPO.getUuid());
imageMaintainPO.setPath(maintainUrl);
imageMaintainPOMapper.insert(imageMaintainPO);
LOGGER.info("车辆故障图片插入成功");
}
新增图片的剩下的部分,可以将它作为一个实体对待了,就不进行描述了。