vue axios實現文件上傳後臺springboot

引入jar

        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.3.3</version>
        </dependency>

html代碼

<div id="uploadDiv">
    <input type="file" value="" id="file" @change="uploadConfig" name="file">
</div>
<script type="text/javascript">
    new Vue({
        el: '#uploadDiv',
        methods: {
            uploadConfig: function (e) {
                    var formData = new FormData();
                    formData.append('file', e.target.files[0]);
                    var  url = 'fileUpload';
                    var config = 'multipart/form-data;';
                    // axios({
                    //     method:"post",
                    //     url:"fileUpload",
                    //     data:{
                    //         file:'11'
                    //     }
                    // }).then((res)=>{console.log(res.data)})
                    axios.post(url,formData, config).then(function (response) {
                        console.log(response.data)

                    })
            }
        }
    })



    </script>

開始用的註釋的方法,但是後臺接收總是爲null;

java代碼

@RequestMapping(value = "/fileUpload",method =RequestMethod.POST )
public String imgUpload(@RequestParam(value = "file",required = false) MultipartFile file) throws IOException {
   long  startTime=System.currentTimeMillis();
    System.out.println("fileName:"+file.getOriginalFilename());
    String path="E:/"+new Date().getTime()+file.getOriginalFilename();

    File newFile=new File(path);
    //通過CommonsMultipartFile的方法直接寫文件(注意這個時候)
    file.transferTo(newFile);
    long  endTime=System.currentTimeMillis();
    System.out.println("採用file.Transto的運行時間:"+String.valueOf(endTime-startTime)+"ms");
    return "/success";

}

開始用的接收參數爲

CommonsMultipartFile

報錯

org.springframework.web.method.annotation.MethodArgumentConversionNotSupportedException: Failed to convert value of type 'org.springframework.web.multipart.support.StandardMultipartHttpServletRequest$StandardMultipartFile' to required type 'org.springframework.web.multipart.commons.CommonsMultipartFile'; nested exception is java.lang.IllegalStateException: Cannot convert value of type 'org.springframework.web.multipart.support.StandardMultipartHttpServletRequest$StandardMultipartFile' to required type 'org.springframework.web.multipart.commons.CommonsMultipartFile': no matching editors or conversion strategy found]

 Failed to convert value of type 'org.springframework.web.multipart.support.StandardMultipartHttpServletRequest$StandardMultipartFile' to required type 'org.springframework.web.multipart.commons.CommonsMultipartFile'

修改方式

在application.yml中添加multipart: enabled: true

然後替換 @RequestParam CommonsMultiPartFile 爲 @RequestParam MultipartFile file

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章