最近項(xiàng)目中需要用到文件上傳，使用了angular-file-upload插件完成

首先來(lái)介紹下這個(gè)插件的一些屬性（參考官方文檔）

FileUploader

屬性

• url?{String}: 上傳文件的服務(wù)器路徑
• alias?{String}: ?包含文件的名稱，默認(rèn)是file

• queue?{Array}: 上傳隊(duì)列
• progress?{Number}: 上傳隊(duì)列的進(jìn)度，只讀
• headers?{Object}: 上傳的頭文件信息， 瀏覽器需支持HTML5
• formData?{Array}:?與文件一起發(fā)送的表單數(shù)據(jù)
• filters?{Array}: 在文件加入上傳隊(duì)列之前應(yīng)用過(guò)濾器.，如果過(guò)濾器返回true則文件加入隊(duì)列中

• autoUpload?{Boolean}: 文件加入隊(duì)列之后自動(dòng)上傳，默認(rèn)是false
• method?{String}: 請(qǐng)求方式，默認(rèn)是POST，瀏覽器需支持HTML5
• removeAfterUpload?{Boolean}: 文件上傳成功之后從隊(duì)列移除，默認(rèn)是false
• isHTML5?{Boolean}:?如果瀏覽器支持HTML5上傳則返回true，只讀
• isUploading?{Boolean}:?文件正在上傳中返回true，只讀
• queueLimit?{Number}?: 最大上傳文件數(shù)量（預(yù)定義）
• withCredentials?{Boolean}?: 使用CORS，默認(rèn)是false，?瀏覽器需支持HTML5

方法

• addToQueue?function(files[, options[, filters]]) {: Add items to the queue, where?files?is a?{FileList|File|HTMLInputElement},?options?is an?{Object}?andfilters?is a?{String}. ?添加項(xiàng)到上傳隊(duì)列中，files?是?{FileList|File|HTMLInputElement}，?options?是?{Object}?以及?filters?是?{String}
• removeFromQueue?function(value) {: Remove an item from the queue, wherevalue?is?{FileItem}?or index of item. ?從上傳隊(duì)列移除項(xiàng)，value?可以是?{FileItem}?或者項(xiàng)的序號(hào)
• clearQueue?function() {: Removes all elements from the queue. ?移除上傳隊(duì)列所有的元素
• uploadItem?function(value) {: Uploads an item, where?value?is?{FileItem}?or index of item. ?上傳項(xiàng)，?value?可以是?{FileItem}?或者項(xiàng)的序號(hào)
• cancelItem?function(value) {: Cancels uploading of item, where?value?is{FileItem}?or index of item. ?取消上傳的項(xiàng)
• uploadAll?function() {: Upload all pending items on the queue. ?將上傳隊(duì)列中所有的項(xiàng)進(jìn)行上傳
• cancelAll?function() {: Cancels all current uploads. ?取消所有當(dāng)前上傳
• destroy?function() {: Destroys a uploader.?
• isFile?function(value) {return {Boolean};}: Returns true if value is?{File}.?
• isFileLikeObject?function(value) {return {Boolean};}: Returns true if value is{FileLikeObject}.
• getIndexOfItem?function({FileItem}) {return {Number};}: Returns the index of the{FileItem}?queue element. ?返回項(xiàng)在上傳隊(duì)列中的序號(hào)
• getReadyItems?function() {return {Array.<FileItems>};}: Return items are ready to upload. ?返回準(zhǔn)備上傳的項(xiàng)
• getNotUploadedItems?function() {return {Array.<FileItems>};}: Return an array of all pending items on the queue ?返回上傳隊(duì)列中未上傳的項(xiàng)

回調(diào)函數(shù)

• onAfterAddingFile?function(item) {: 添加文件到上傳隊(duì)列后
• onWhenAddingFileFailed?function(item, filter, options) {: 添加文件到上傳隊(duì)列失敗后
• onAfterAddingAll?function(addedItems) {: 添加所選的所有文件到上傳隊(duì)列后
• onBeforeUploadItem?function(item) {: 文件上傳之前
• onProgressItem?function(item, progress) {: 文件上傳中
• onSuccessItem?function(item, response, status, headers) {: 文件上傳成功后
• onErrorItem?function(item, response, status, headers) {: 文件上傳失敗后
• onCancelItem?function(item, response, status, headers) {?- 文件上傳取消后
• onCompleteItem?function(item, response, status, headers) {: 文件上傳完成后
• onProgressAll?function(progress) {: 上傳隊(duì)列的所有文件上傳中
• onCompleteAll?function() {: 上傳隊(duì)列的所有文件上傳完成后

使用

當(dāng)然首先需要加入插件的js

bower

bower install angular-file-upload

　在頁(yè)面導(dǎo)入js

<script src="bower_components/angular-file-upload/dist/angular-file-upload.min.js"></script> 加入angularFileUpload var myapp = angular.module('add',['angularFileUpload'])

?html

我這里是上傳的圖片所以代碼如下：

?

1 <div ng-controller="addProduct"> 2 <div> 3 <lable>產(chǎn)品名稱</lable> 4 <input type="text" ng-model="productInfo.name"> 5 </div> 6 <div> 7 <lable>產(chǎn)品型號(hào)</lable> 8 <input type="text" ng-model="productInfo.type"> 9 </div> 10 <div> 11 <lable>產(chǎn)品圖片</lable> 12 <input type="file" name="photo" nv-file-select="" uploader="uploader" accept="image/*" ngf-max-size="2MB" ngf-model-invalid="errorFile" /></div> 13 <div><button class="btn btn-info" ng-click="addProduct()"></div> 14 </div>

?

這個(gè)是最簡(jiǎn)單的使用主要是uploader這個(gè)屬性，其他的accept、ngf-max-size、ngf-model-invalid都是一些限制圖片的屬性

Js

1 myapp.controller('addProduct',['$scope','$http','FileUploader',function($scope,$http,FileUploader){ 2 3 //在外圍定義一個(gè)數(shù)組，賦值給formData,通過(guò)改變此數(shù)組，實(shí)現(xiàn)數(shù)據(jù)的改變 4 var productInfo=[]; 5 var uploader = $scope.uploader = new FileUploader({ 6 url: 'add', 7 formData:productInfo 8 }); 9 uploader.onSuccessItem = function(fileItem, response, status, headers) { 10 alert(response); 11 }; 12 $scope.addProduct = function() { 13 uploader.uploadAll(); 14 15 } 16 }])

?

java

1 @RequestMapping(value="add",method = RequestMethod.POST) 2 public ResponseEntity<Object> addProduct(@RequestParam("file") MultipartFile uploadFiles,ProductVo productVo){ 3 4 String fileName=uploadFile.getOriginalFilename(); 5 String prefix="."+fileName.substring(fileName.lastIndexOf(".")+1); 6 File dst=null; 7 try { 8 String root = System.getProperty("catalina.base"); //獲取tomcat根路徑 9 File uploadDir = new File(root, "webapps/upload"); //創(chuàng)建一個(gè)指向tomcat/webapps/upload目錄的對(duì)象 10 if (!uploadDir.exists()) { 11 uploadDir.mkdir(); //如果不存在則創(chuàng)建upload目錄 12 } 13 dst = new File(uploadDir, 14 UUID.randomUUID().toString()+prefix); //創(chuàng)建一個(gè)指向upload目錄下的文件對(duì)象，文件名隨機(jī)生成 15 uploadFile.transferTo(dst); //創(chuàng)建文件并將上傳文件復(fù)制過(guò)去 16 } catch (Exception e) { 17 e.printStackTrace(); 18 } 19 //然后把路徑set到productVo中 完成添加 "/upload/"+dst.getName(); 20 21 }

如此就完成了。

?

主要問(wèn)題

在Js中給formData賦值 因?yàn)閒ormData的new生成的所以 就是固定不變的，如果直接寫(xiě)formData：[$scope.prodctInfo]，就會(huì)導(dǎo)致formData沒(méi)有值，后臺(tái)就獲取不到其他數(shù)據(jù)了。

如果失敗的話可以調(diào)用onBeforeUploadItem?function(item)這個(gè)方法，給formData重新賦值，達(dá)到修改的目的。如下：

uploader.onBeforeUploadItem function(item）{formData：“最終需要傳遞的值” }

轉(zhuǎn)載于:https://www.cnblogs.com/wangzun/p/6099884.html

總結(jié)

以上是生活随笔為你收集整理的angular-file-upload+springMVC的使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。