鍍金池/ 問答/HTML/ vue2+axios上傳圖片后臺接收不到

vue2+axios上傳圖片后臺接收不到

1.我想實現(xiàn)vue前端上傳圖片的功能，后臺使用Java實現(xiàn)

@RequestMapping(value = "uploadDeliveryImg.json", method = RequestMethod.POST)
    @ResponseBody
    public JSONObject uploadDeliveryImg(@RequestParam MultipartFile file, HttpServletResponse response, HttpServletRequest request) {
       
        JSONObject returnMsg = new JSONObject();
        String result=null;
        try {
        // 處理邏輯

        } catch (Exception e) {
        }
        return returnMsg;
    }

postman成功接通
clipboard.png
后臺也是看到了，
clipboard.png
但是我用axios請求一直進不來，這是后臺報的錯，網(wǎng)上查了一下，也沒有具體的可行方案

clipboard.png
后面我換了一個jQuery庫，使用ajax也是成功的。
所以我懷疑是我配置的問題，下面貼出測試代碼，有經(jīng)驗的看下
前端

<form method="post" action="/ecp/peiapi/uploadDeliveryImg.json" @submit.prevent="comfirmAction" id="fileForm" enctype="multipart/form-data">
<input type="file" @change="getFile" name="uploadFile">
<input type="submit" value="提交">
  </form>

js

import axios from 'axios';

  export default {
    data() {
      return {
        file: {}
      };
    },
    created() {
    },
    methods: {
      getFile(e){
        console.log("e",e)
        this.file=e.target.files[0];
      },
      comfirmAction(){
        var formData = new FormData();
        formData.append('dispatchLineId', 1)
        formData.append('orderNo', 1)
        formData.append('dispatchState', 1)
        formData.append('file', this.file)
        formData.append('chunk', '0')
        let config = {
          headers: {'Content-Type': 'multipart/form-data'}
        }
        // 添加請求頭
        axios.post('ecp/peiapi/uploadDeliveryImg.json', formData, config)
          .then(response => {
            if (response.data.code === 0) {
              self.ImgUrl = response.data.data
            }
            console.log(response.data)
          })
        console.log('formData.get(\'file\')=',formData.get('file'))

        axios.interceptors.request.use((config) => {
          return config;
        },(error) =>{
          return Promise.reject(error);
        });

      }
    }

網(wǎng)上還有人說axios request payload默認是json，但是我設(shè)了header難道沒有作用嗎？

回答
編輯回答
兔囡囡

comfirmAction() 這個函數(shù)里 console.log(this.file) 看一下有沒有值

2017年2月5日 22:57
編輯回答
薄荷綠

你把請求頭去掉試試。
按說axios里會對數(shù)據(jù)類型做判斷，是formdata的話會放棄設(shè)置請求頭，改由瀏覽器設(shè)置。
你自己設(shè)置的話不知道會不會少一個叫boundary的東西我不太清楚。
你貼下你的請求頭。
圖片描述
你問題評論里補充的東西應(yīng)該就是提示缺少它。

axios源碼里有這個，所以對于formData數(shù)據(jù)是不需要設(shè)置header的應(yīng)該。

if (utils.isFormData(requestData)) {
  delete requestHeaders['Content-Type']; // Let the browser set it
}
2018年8月14日 02:32
編輯回答
墨小羽

前端代碼沒什么問題啊，可能是我太菜了看不出哪里有問題? ? ?

2017年8月4日 20:38
編輯回答
尤禮

把頭的設(shè)置去掉試試

2018年6月30日 12:25
編輯回答
疚幼

首先，謝謝各位熱心的程序員。問題解決了，其實就是少了一個屬性，網(wǎng)上說的那些都是錯的，加header這個被他害苦了，希望有遇到問題的時候多去看官方文檔，或者源碼，共勉。
withCredentials: false, // default 改為true就行了。
下面是具體的解決代碼

getFile(e){
    console.log("e",e)
    this.file=e.target.files[0];
  },
  comfirmAction(){
    var formData = new FormData();
    formData.append('file', this.file)
    const instance=axios.create({
      withCredentials: true
    })
    instance.post('ecp/peiapi/uploadDeliveryImg.json', formData)
    .then(response => {
      console.log(response.data)
    })
  }
2018年8月30日 22:36