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;
}