0、weui.uploader上传图片Demo

一、前端页面代码

前端页面点击保存按钮，手动提交封装FormData()对象上传图片。

<div class="page">
	<div class="page__hd sign-in-hd">
		<h1 class="page__title">图片上传</h1>
		<p class="page__desc">从现场拍照或在相册中选择图片上传</p>
	</div>
	<div class="page__bd">
		<div class="weui-cells weui-cells_form" id="uploader">
			<div class="weui-cell">
				<div class="weui-cell__bd">
					<div class="weui-uploader">
						<div class="weui-uploader__hd">
							<p class="weui-uploader__title">图片上传</p>
							<div class="weui-uploader__info"><span id="uploadCount">0</span>/5</div>
						</div>
						<div class="weui-uploader__bd">
							<ul class="weui-uploader__files" id="uploaderFiles"></ul>
							<div class="weui-uploader__input-box">
								<input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple="" />
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div>
			<div class="bz-tite">备注：</div>
			<div>
				<textarea class="bz-text" id="note" rows="5" placeholder="备注..."></textarea>
			</div>
		</div>
		<div class="submit-btn">
			<a class="weui-btn weui-btn_primary" href="javascript:" onclick="submitBtn()">保存</a>
		</div>
	</div>
</div>

<script type="text/javascript">
	var configs = {
		baseURL: 'http://127.0.0.1:8080/web/api/'
	}
	var objData = {
		userId: 0,
		status: 0,
		uploadCount: 0,
		blobs: [],
		files: []
	}
	initObjData();
	function initObjData(){
		// http://127.0.0.1:9001/signIn.html?userId=1001&status=101
		objData.userId=getUrlQueryString('userId');
		objData.status=getUrlQueryString('status');
	}

	// 文档：https://github.com/Tencent/weui.js/blob/master/docs/component/uploader.md
	weui.uploader('#uploader', {
		url: '',
		auto: false, //关闭自动上传
		type: 'file',
		fileVal: 'files',
		compress: {
			width: 1600,
			height: 1600,
			quality: .8
		},
		onBeforeQueued: function(files) {
			// `this` 是轮询到的文件, `files` 是所有文件
			if(["image/jpg", "image/jpeg", "image/png", "image/gif"].indexOf(this.type) < 0){
				weui.alert('请上传图片');
				return false; // 阻止文件添加
			}
			if(this.size > 10 * 1024 * 1024){
				weui.alert('请上传不超过10M的图片');
				return false;
			}
			if (files.length > 5) { // 防止一下子选择过多文件
				weui.alert('最多只能上传5张图片，请重新选择');
				return false;
			}
			if (objData.uploadCount + 1 > 5) {
				weui.alert('最多只能上传5张图片');
				return false;
			}
			//objData.files.push(this);
			objData.uploadCount=objData.uploadCount+1;
			setUploadCountDom(objData.uploadCount);
		},
		onQueued: function(){
			//console.log(this);
			objData.blobs.push(this);
		},
		onSuccess: function (ret) {
			//console.log(this, ret);
			//submitFlag = true;
		},
		onError: function(err){
			console.log(this, err);
		}
	}); 

	// 缩略图预览
	document.querySelector('#uploaderFiles').addEventListener('click', function(e){
		var target = e.target;
		while(!target.classList.contains('weui-uploader__file') && target){
			target = target.parentNode;
		}
		if(!target){
			return;
		} 
		var url = target.getAttribute('style') || '';
		var id = target.getAttribute('data-id');
		if(url){
			url = url.match(/url\((.*?)\)/)[1].replace(/"/g, '');
		}
		var gallery = weui.gallery(url, {
			onDelete: function(){
				weui.confirm('确定删除该图片？', function(){
					// 删除blobs数组对应的文件
					let blobs = objData.blobs;
					for(var i = 0; i < blobs.length; i++) {
						if(blobs[i].id == id){
							objData.blobs.splice(i,1);
							objData.uploadCount=objData.uploadCount-1;
							setUploadCountDom(objData.uploadCount);
							break;
						}
					}
					target.remove();
					gallery.hide();
				});
			}
		});
	});
	// 设置图片计数
	function setUploadCountDom(uploadCount){
		document.getElementById("uploadCount").innerHTML=uploadCount;
	}

	// 保存
	function submitBtn(){
		// 提交图片和备注
		let formData = new FormData();
		let blobs = objData.blobs;
		for(var i = 0; i < blobs.length; i++) {
			// blob转file
			let blob = blobs[i];
			formData.append("files",new window.File([blob],blob.name,{type:blob.type}));
		}
		formData.append("id",objData.userId);
		formData.append("status",objData.status);
		formData.append("note",$('#note').val());
		
		// axios 方式提交
		axios({
			url:configs.baseURL+'/web/dispath/create',
			method: 'post',
			data: formData,
			//processData不设置为false,jquery会把formData转换为字符串
			processData: false,
			//contentType设为false http发送multipart/form-data请求报文示例,避免后端解析报no multipart boundary was found错误
			contentType: false
		}).then(function (response) {
			console.log(response);
			if(response.data.success){
				weui.alert(response.data.message);
			}else{
				weui.alert(response.data.message);
			}
		}).catch(function (error) {
			console.log(error);
		});

		// ajax 方式提交
		// $.ajax({
		//     type: "POST",
		//     url: configs.baseURL+'/web/dispath/create',
		//     data: formData,
		//     dataType: "json",
		//     cache: false,
		//     //processData不设置为false,jquery会把formData转换为字符串
		//     processData: false,
		//     //contentType设为false http发送multipart/form-data请求报文示例,避免后端解析报no multipart boundary was found错误
		//     contentType: false,
		//     success:function(data){
		//         console.log(data)
		//     },
		//     error:function(err) {
		//         console.log(err)
		//     }
		// });
	}
	
</script>

weui.uploader() 具体参数说明使用，参考腾讯官方文档：

https://github.com/Tencent/weui.js/blob/master/docs/component/uploader.md

二、Java后端SpringMVC接参处理

@CrossOrigin
@RestController
@RequestMapping("/upload")
public class UploadController {

    private static final String BASE_PATH = "F:\\test\\upload\\ac_img\\";

    @PostMapping("/img")
    public Map upload(MultipartFile[] files, User user) throws Exception{
        Map map = new HashMap();
        for (MultipartFile file : files) {
            // 获取文件名
            String fileName = file.getOriginalFilename();
            System.out.println("上传的文件名为：" + fileName);
            file.transferTo(getFile(BASE_PATH + fileName));
        }
        map.put("code", 200);
        map.put("status", true);
        return map;
    }

    private File getFile(String path) throws Exception {
        File file = new File(path);
        //判断文件父目录是否存在
        if (!file.getParentFile().exists()) {
            file.getParentFile().mkdirs();
        }
        return file;
    }
}

代码文件已上传到码云仓库：

https://gitee.com/yandype/weui-upload-demo