1. 程式人生 > >在使用axios進行上傳檔案的坑

在使用axios進行上傳檔案的坑

在進行檔案上傳後臺報錯

在使用axios進行檔案上傳時,後臺的grails程式經常或出現不能獲取file的情況 No signature of method

No signature of method: org.springframework.security.web.servletapi.HttpServlet3RequestFactory$Servlet3SecurityContextHolderAwareRequestWrapper.getFile() is applicable for argument types: (java.lang.String) values: [inputFile]
Possible solutions: getXML(), getPart(java.lang
.String), getAt(java.lang.String), getAt(java.lang.String), getLocale(), getJSON(). Stacktrace follows: java.lang.reflect.InvocationTargetException: null

經過排查不是後臺程式的問題,在前端上傳的時候,需要對資料進行處理
如下處理就能正常獲取上傳的檔案了

 html:
 選擇檔案: <input type="file" name="fileUpload" id="fileUp" @change="change($event)"
ref="inputFile" > vuejs: change:function(event){ this.file = event.target.files[0] }, upFile:function(event){ var data = new FormData();//重點在這裡 如果使用 var data = {}; data.inputfile=... 這樣的方式不能正常上傳 data.append("inputFile",this.file) data.append("title"
,"thisAGoodTitle") console.log(data) // var cfg = { // 'Content-type':'multipart/form-data' // } let headers = {headers: {"Content-Type": "multipart/form-data"}} this.$http.post("http://localhost:8081/api/peixun/vedio/uploadVideo",data,headers).then(function(data){ console.log(data); },function(err){ console.log("err------: "); console.log(err); }) } 後端: def file = request.getFile('inputFile') file.transferTo(new File(path,newName))//寫到磁碟

這樣就能將前端的檔案上傳到伺服器端了
如果不使用這種header,直接將檔案按照如下上傳 也是可以正常完成上傳的

 // let headers = {headers: {"Content-Type": "multipart/form-data"}}
this.$http.post("http://localhost:8081/api/peixun/vedio/uploadVideo",data).then(function(data){...})

到此,axios進行檔案上傳的問題解決了
標記此文,以後遇到這個問題不用到處找了