•上傳圖片需要引入插件ngFileUpload，使用bower安裝方法： bower install ng-file-upload --save,安裝后需要在命名app的名字js文件中注入，如下所示：
(function() {
angular.module('app', [
'ionic','ngStorage','ngFileUpload'
]);
})();
•在相應的html中引入文件路徑：<script src="lib/ng-file-upload/ng-file-upload.min.js"></script>
•如何使用呢？在html文件中使用 ngf-select
<div class="editHeader_div" ngf-select="setStore.uploadFiles($file, $invalidFiles)">
<img class="editStoreImg" ng-src="img/{{setStore.img}}">
<p>更改頭像</p>
</div>
在相應的controller中：
//上傳單個文件
function uploadFiles(file, errFiles) {
vm.imgInfo = file;
console.log(file);
if (file) {
vm.img = file.name;//測試使用
//Service.upload('','',{file:file})//開發使用
}
}
在http請求如下：
//文件上傳預設配置
Upload.setDefaults({
ngfAccept: "'.jpg,.png,.gif,.jpeg'",
ngfDropDisabled: 'true',
ngfPattern: '.jpg,.png,.gif,.jpeg',
ngfMaxSize: '2MB'
});
//上傳文件
function upload(ctrl, name, param) {
var deferred = $q.defer(),
interfaceName = ctrl + '/' + name,
backendDetail = getBackendDetail(interfaceName);
//上傳文件到服務器
Upload.upload({
url: backend.url + ':' + backendDetail.port + '/' + backendDetail.service + '/' + interfaceName,
data: param || {}
}).then(function(data) {
//service返回數據
var result = data.data;
//200代表接口調用成功
if (data.status === 200) {
//數據庫返回錯誤信息
if (result && serviceErrors[result.returnCode]) {
deferred.reject('Error Services');
swal(result.message, '錯誤狀態碼：' + result.returnCode, 'error');
} else if (!result.dataInfo) {
deferred.reject('Error Image');
swal('圖片上傳失敗', '請檢查圖片屬性', 'error');
} else {
deferred.resolve(result);
}
} else {
deferred.reject('Error Services');
swal('提交操作失敗', '錯誤狀態碼：' + data.status, 'error');
}
}, function(error) {
deferred.reject('Error Services');
swal('提交操作失敗', '錯誤狀態碼：' + error.status, 'error');
});
return deferred.promise;
}
總結
以上所述是小編給大家介紹的Angularjs上傳圖片實例詳解，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
