vue 图片上传

html

<img width="50px" height="50px"  v-bind:src="file1_dataObj.src" onclick="this.nextElementSibling.click()"   /> <!--点击图片触发change-->
<input type="file"  v-on:change="file1_inputFileChange(this.event)" accept="image/*" v-show="false" />

 vue data：初始化

file1_dataObj:{
	src:"../res/vnan/images/add.jpg"//初始化加号图片
},

vue中的方法

// 文件1变化事件
			file1_inputFileChange: function(event){
				var thisVue = this ;
				console.info("event=");
				console.info(event);
				console.info("文件对象:");
				var fileObj = event.target.files[0];
				console.info(fileObj);
				
				// 此处处理图片File对象,可以转为base64后处理上传,也可以调用ajax直接上传.
				{
					var formUrl = global_env.urls.bsi_serv  + "/wap/wap_order_mgr/upload_img";
					var formData = new FormData();
					formData.append('file', fileObj);
					formData.append("user_login_token",user_login_token);
					jQuery.ajax({
					url : formUrl,
						data :formData,
						type : "POST",
						dataType:"JSON",
						cache: false,
						processData: false,
						contentType: false,
						success: function(rspData) {
							console.info("调用SUCCESS,返回数据:");
							console.info(rspData);
							if(rspData){ // 返回值胡效,则改变显示的值
								var imgUrl=rspData.data.bindUrl+rspData.data.expParam;
//								console.log(imgUrl);
								thisVue.$data.file1_dataObj.src = imgUrl;
							}
							
						},
						error: function(e) {
							console.error("发生错误了",e);
						}
					});
				}
				// 转换为base64并变化显示   ！！！！纯预览  不是返回的图片！！！！
//				thisVue.parseFileObjToBase64(fileObj,function(rstData){
//					if(rstData){ // 返回值胡效,则改变显示的值
//						thisVue.$data.file1_dataObj.src = rstData;
//					}
//				});
			},

			// 转换文件为Base64
			parseFileObjToBase64 : function(fileObj,callback){
				console.info("文件对象转换为Base64...");
			    var tmpfile = fileObj ;
			    if (tmpfile && tmpfile.type ) {
			        console.debug(tmpfile);
			      // tmpfile.size ; // 文件大小,字节,
			      // tmpfile.name ; // 文件名称
			      // tmpfile.type ; // 文件类型,例:image/jpeg
			        var reader = new FileReader();
			        reader.readAsDataURL(tmpfile);
			        reader.onload = function(){
			        var rstData = this.result ; // 最终数据 转换成base64后的数据.
			        if(callback){ // 回调函数
			        	callback(rstData);
			        }
			      }
			    }
			},

后台java   control层代码

/**
     * 请求。
     * @param request
     * @return
     */
    @ApiOperation(  value = "上传图片" , response= Object.class)
    @RequestMapping(value = "upload_img",method={RequestMethod.POST})
    @CrossOrigin
    @ResponseBody
    public Map<String, Object> uploadHeadImg(HttpServletRequest request, @RequestParam("file") MultipartFile file  , @RequestParam Map<String,String> reqParams) {
    	Map<String, Object> modelMap = new HashMap<String, Object>();
    	try {
        	// 校验登录及权限
    		 UserLoginInf userLoginInf =	userctrPowerWebService.getAndCheckLogininfWithUrlpw(request, reqParams);
			 	ExecutorInf  executor= executorInfService.genExecuterByUserLoginInf(userLoginInf);
    		// 图片二进制
    		byte[] fileBytes = file.getBytes();
    		// 图片压缩 TODO 
			LoanorderUploadimgSreq uploadSreq = new LoanorderUploadimgSreq();
			uploadSreq.setExecutor(executor);
			uploadSreq.setFileByteArray(fileBytes);
			OrderImgurlDto imgurlDto = loanorderStepConfirmService.doUploadOrderPhoto(uploadSreq );
					String chnlUrl = imgurlDto.getBindUrl() + imgurlDto.getExpParam();
    		// 图片上传并返回地址 TODO 
    		System.err.println(chnlUrl);
    		// url数据返回
    		modelMap.put("data", imgurlDto);
			} catch (Exception e) {
				WebservUtils.addExceptionErrToRspData(e, modelMap);
			}
			return modelMap;
    }