后端写法
首先传进来是一个数组，判断他的长度是否>0，大于0就遍历切割
，最后 map.put(“src”,FilePath+timeDf+"/"+fName +"."+ oName);就是给他返回一个url给前端。
/*文件上传页面*/
@RequestMapping("/goods/upload")
@ResponseBody
public HashMap<String, Object> upload(MultipartFile[] file){
HashMap<String, Object> map = new HashMap<>();
try {
if (file!=null&&file.length>0){
for (int i = 0; i <file.length ; i++) {
String fileName = file[i].getOriginalFilename();
//截取点后面的字符
String oName = fileName.substring(fileName.lastIndexOf(".")+1);
//时间目录
SimpleDateFormat sdf = new SimpleDateFormat("yyy-MM-dd");
String timeDf = sdf.format(new Date());
//保证上传文件的唯一性
String fName = UUID.randomUUID() + "";
//拼接上传文件的全路径
String uploadName = serviceUrl + "\\" + timeDf + "\\" + fName +"."+ oName;
//创建文件对象
File f = new File(uploadName);
if (!f .exists()&&!f.isDirectory()){
f.mkdirs();
}
//保存文件
file[i].transferTo(f);
//把文件路径传到前台
map.put("src",FilePath+timeDf+"/"+fName +"."+ oName);
System.out.println("我是路径"+FilePath+timeDf+"/"+fName +"."+ oName);
}
}
//获取文件的后缀
//存0代表成功
map.put("code",0);
return map;
} catch (IOException e) {
e.printStackTrace();
}
map.put("src","");
map.put("code",1);
return map;
}配置映射，就是真实路径和虚拟路径的映射
//文件上传注册，注册虚拟路径,实现绝对路径和虚拟路径的映射
@Configuration
public class UploadConfig implements WebMvcConfigurer {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/upload/**").addResourceLocations("file:" +"D://IdeaProjects//springboot//springbootimage/");
}
}图片上传html代码
<input type="hidden" name="url1" class="image">
<div class="layui-form-item">
<label class="layui-form-label ">主图:</label>
<div class="layui-upload">
<button type="button" class="layui-btn" id="test0">上传图片</button>
<div class="layui-upload-list" style="margin-left: 100px">
<img class="layui-upload-img" id="demo0" width="200" height="100" >
<p id="demoText"></p>
</div>
</div>
</div>
<input type="hidden" name="url2" class="multiple_show_img" value="">
<div class="layui-form-item">
<label class="layui-form-label">轮播图片：</label>
<div class="layui-upload">
<button type="button" class="layui-btn" id="multiple_img_upload">多图片上传</button>
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
预览：
<div class="layui-upload-list" id="div-slide_show"></div>
</blockquote>
</div>
</div>
<script>
layui.use('upload', function(){
var $ = layui.jquery
,upload = layui.upload;
//普通图片上传
var uploadInst = upload.render({
elem: '#test0'
,url: '/manager/goods/upload/'
,accept:'url'
,size:50000
,before: function(obj){
obj.preview(function(index, file, result){
//显示上传图片
$('#demo0').attr('src', result);
});
}
,done: function(res){
//如果上传失败
if(res.code > 0){
return layer.msg('上传失败');
}
//上传成功
var demoText = $('#demoText');
demoText.html('<span style="color: #4cae4c;">上传成功</span>');
var fileupload = $(".image");
//把图片在项目中的路径存入到 属性 class=image的input框中
fileupload.attr("value",res.src);
console.log(fileupload.attr("value"));
}
,error: function(){
//演示失败状态，并实现重传
var demoText = $('#demoText');
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function(){
uploadInst.upload();
});
}
});
});
var multiple_images = [];
layui.use('upload', function () {
var upload = layui.upload;
var oIds="";
//多图片上传
upload.render({
elem: '#multiple_img_upload'
,url: '/manager/goods/upload/'
,multiple: true
,before: function(obj){
//预读本地文件示例，不支持ie8
obj.preview(function(index, file, result){
$('#div-slide_show').append('<img src="'+ result +'" alt="'+ file.name
+'" title="点击删除" class="layui-upload-img" "delMultipleImgs(this)">')
});
}
,done: function(res){//如果上传失败
if(res.code > 0){
return layer.msg('上传失败');
}
//上传成功
var demoText = $('#demoText');
demoText.html('<span style="color: #4cae4c;">上传成功</span>');
var fileupload = $(".multiple_show_img");
//把图片在项目中的路径存入到 属性 class=multiple_show_img的input框中
oIds+=res.src+",";
fileupload.attr("value",oIds);
console.log(fileupload.attr("value"));
},error: function(){
//演示失败状态，并实现重传
var demoText = $('#demoText');
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function(){
uploadInst.upload();
});
}
});
});
</script>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
