1 html页面

<div class="col-sm-2" style="height: 200px;margin-top: 14px;">

<input id="photo" name=" " type="file" value="选择图片"  ng-model="photoUrl">

<input type="button" ng-click = "uploadPic()" value="确定" style="margin-top: 150px;margin-left: 10px;"/>

</div>

2 js里面

$scope.uploadPic = function(){

var obj = document.getElementById("photo");

console.log("13:"+obj.value)

if(obj.value){

var file = obj.files[0]

//注意此处，chrome不支持直接获取文件的绝对路径，需要把文件放到一个中间地址，然后用js获取这个中间地址的绝对路径

var windowURL = window.URL || window.webkitURL;  

   var dataURL = windowURL.createObjectURL(file); 

console.log($('#img1'))

console.log(dataURL)

 $('#img1').attr('src',dataURL)

var img = document.createElement('img');

img.src = dataURL;

以上是在中间地址放文件的逻辑

var data

img.onload =function() {

//转base64

data = getBase64Image(img);

console.log("changdu:"+data.length);

一般浏览器对提交字符串有大小限制，要限定一下，要不会报错

if(data.length<1050000){

console.log(data);

$('#img1').attr('src',data)

$scope.pic = {};

$scope.pic.idPark = idPark;

$scope.pic.picture = data;

dataParkSettingAdmin.saveOrUpdateParkPicture(idPark,$scope.pic).success(function(data) {

console.log("shangchuantupian:"+data.result);

})

}else{

app.modalWin.info({title:' ', content:'该图片不支持上传' });

}

}

}

}

以下是图片转base64字符串的函数

function getBase64Image(img) {

var canvas = document.createElement("canvas");

canvas.width = img.width;

canvas.height = img.height;

var ctx = canvas.getContext("2d");

ctx.drawImage(img, 0, 0, img.width, img.height);

var dataURL = canvas.toDataURL("image/png");

return dataURL // return dataURL.replace("data:image/png;base64,", "");

}