多图片上传操作小结

多图片上传也是现实中应用场景比较多的功能，如淘宝的商品宣传图、各种app的轮播图、商业网站的宣传图片等。
其实实现原理也很简单，本质上还是利用单图片上传的功能来实现。

接下来我会展示三个部分的代码:HTML、JS、后端接口。需要的同学可以直接CV即可，注意修改下其中的参数。（但还是比较推荐看下其中的实现原理，理解原理才能更好的运用技术）

一、HTML页面

需要特别说明的是，多图片上传时，预览图片都会被放到

该标签下。

 

<div class='col-md-6 margin-bottom-15'>
	<label for='detailphoto' class='control-label'>
	//轮播图
	</label>
	//表单元素，用于保存多图片地址（地址直接用','拼接）
	<input type="hidden" class="form-control" id="detailphoto" value=""/>
	<div class="layui-upload">
		//上传按钮
		<button type="button" class="layui-btn" id="test2">上传图片</button> 
		<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
			//预览图片区域
			<div class="layui-upload-list" id="demo2">
			</div>
		</blockquote>
	</div>
</div>

二、JS页面

1.点击上传后，先清空预览图片和表单信息。
2.再执行上传操作
3.上传成功后，将图片地址进行拼接。然后将拼接完成的字符串放入表单元素中

layui.use('upload', function(){
//轮播图上传
//上传成功数量
var n = 0;
	upload.render({
		elem: '#test2'
                //上传接口
		,url: baseUrl + '/system/upload/uploadFile?token=' + getCookie('info').token
		,multiple: true
		//上传前回调
		,before: function(obj){
			layer.load(1);
			if(n == 0) {
				//清空预览图片
				$('#demo2').empty();
				$("#detailphoto").val("");
			}
			obj.preview(function(index, file, result){
				//添加预览图片
				$('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img" style="width: 100px;height: 100px;" >&nbsp;&nbsp;');
			});
		}
		//每个文件提交一次触发一次。
		,done: function(res){
			if(res.code > 0){
				return layer.msg('上传失败');
			}else{
				layer.msg('上传成功' + (++n) + '张');
				$("#detailphoto").val($("#detailphoto").val() + res.body.uploadFilePath + ",");
			}
		}
		//全部上传完成后的回调
		,allDone: function(obj){
			layer.closeAll('loading');
		}
	});
});

三、后台接口

一般公司实际项目中，图片服务器和web服务器分离。这样可以提供web服务器的性能，同时便于对图片等静态资源进行管理。
本项目的图片服务器是采用阿里云的OSS服务，官方文档请转至https://help.aliyun.com/document_detail/32013.html?spm=a2c4g.11186623.6.729.2d25c06dW7jZ1D

注：公司框架是采用SpringBoot+SpringCloud，所以会有@controller、@RequestMapping等注解。小伙伴们根据自己需要修改即可。

/**
 * 上传文件Controller
 * @author 梁钟
 * @date 2018-04-20
 */
@Controller
@RequestMapping("/system/upload")
public class UploadFileController {
	
	//服务区域
	private static String endpoint = "http://oss-cn-hangzhou.aliyuncs.com";// <endpoint, http://oss-cn-hangzhou.aliyuncs.com>
	//服务账号
	private static String accessKeyId = "LTAI5kjNIRwTo70w";// <accessKeyId>
	//服务密码
	private static String accessKeySecret = "eznYw02pUzF8sYaxIGKlW23uX0XDwz";// <accessKeySecret>
	//存储位置
	private static String bucketName = "bb269e6e-4516-f8be-b132-8019100a4763";// <bucketName>

	
	/**
	 * 上传图片
	 * @param uploadFile
	 * @return
	 * @throws Exception
	 */
	public static Map<String, Object> QRcodeUpload(InputStream in) throws Exception {
		// 上传
		long startTime = System.currentTimeMillis();// 开始时间
		String key = new SimpleDateFormat("yyyyMMdd").format(new Date()) + "/"
				+ UUID.randomUUID().toString();// oss文件名（Object Name）
//				+ UUID.randomUUID().toString().replaceAll("-", "").substring(0, 32);// oss文件名（Object Name）
		/*
		 * Constructs a client instance with your account for accessing OSS
		 */
		OSSClient ossClient = new OSSClient(endpoint, accessKeyId, accessKeySecret);
		try {
			// new对象元信息
			ObjectMetadata meta = new ObjectMetadata();
			// 设置contentType
			meta.setContentType("image/jpeg");
			// 上传文件
			ossClient.putObject(bucketName, key, in, meta);
		} catch (OSSException oe) {
			System.out.println("Caught an OSSException, which means your request made it to OSS, but was rejected with an error response for some reason.");
		} catch (ClientException ce) {
			System.out.println("Caught an ClientException, which means the client encountered a serious internal problem while trying to communicate with OSS, such as not being able to access the network.");
		} finally {
			/*
			 * Do not forget to shut down the client finally to release all allocated resources.
			 */
			ossClient.shutdown();
		}
		long endTime = System.currentTimeMillis();// 结束时间
		// 出参
		String baseFilePath = "http://bb269e6e-4516-f8be-b132-8019100a4763.oss-cn-hangzhou.aliyuncs.com/";
		Map<String, Object> respMap = new HashMap<String, Object>();
//		respMap.put("uploadFileName", uploadFile.getOriginalFilename());// 文件名称
		respMap.put("uploadFilePath", baseFilePath + key);// 访问路径
		RespBean<Map<String, Object>> respBean = new RespBean<Map<String, Object>>();
		respBean.setBody(respMap);
		System.err.println("\n上传耗时：" + (endTime - startTime)/1000.0 + "s");
		System.err.println("访问路径：" + respMap.get("uploadFilePath"));
		return respMap;
	}
}