主要是利用html5的canvas来进行图片的压缩,然后转化为dataurl，再有dataurl转化为blob文件，blob对象可以直接赋值给formdata.
app.service('util', function($q) { var datauritoblob = function(datauri) { // convert base64/urlencoded data component to raw binary data held in a string var bytestring; if (datauri.split(',')[0].indexof('base64') >= 0) bytestring = atob(datauri.split(',')[1]); else bytestring = unescape(datauri.split(',')[1]); // separate out the mime component var mimestring = datauri.split(',')[0].split(':')[1].split(';')[0]; // write the bytes of the string to a typed array var ia = new uint8array(bytestring.length); for (var i = 0; i height) { if (width > max_width) { height *= max_width / width; width = max_width; } } else { if (height > max_height) { width *= max_height / height; height = max_height; } } canvas.width = width; canvas.height = height; var ctx = canvas.getcontext(2d); ctx.drawimage(img, 0, 0, width, height); //change the dataurl to blob data for uploading to server var dataurl = canvas.todataurl('image/jpeg'); var blob = datauritoblob(dataurl); deferred.resolve(blob); }; reader.readasdataurl(file); } catch (e) { deferred.resolve(e); } return deferred.promise; }; return { resizefile: resizefile };});
由于目前angualrjs暂不支持通过multiform data上传文件，所以利用如下的代码可以上传formdata里的文件
app.controller('companyctrl', function($http, util) { util.resizefile(input.files[0]).then(function(blob_data) { var fd = new formdata(); fd.append(imagefile, blob_data); $http.post('http://your.domain.com/upload', fd, { headers: {'content-type': undefined }, transformrequest: angular.identity }) .success(function(data) { $scope.model.company_pict = data[0]; }) .error(function() { console.log(uploaded error...) }); }, function(err_reason) { console.log(err_reason); });}