element-ui文件上傳一直出錯,做個筆記記錄一下,避免忘記

這兩天公司要求寫一個表單提交頁面,僅僅只需要一個提交頁面就行,偷了個懶使用的vue+element-ui寫的,結果就是數據怎麼都上傳不成功,跟後臺溝通了很久,還是數據有問題,不是缺少這個字段就是缺少那個字段

網上各種搜索,一直都沒能解決我的問題,網上很多的內容,都是說請求有問題,但是最終的結果就是問題並沒有得到解決

最後請教朋友,朋友告訴我是請求參數的問題,我的參數格式與後臺參數不一致的問題,就去網上各種搜素應該怎麼改參數格式,還是一樣不行

其實最終的問題是因爲我並沒有理解element-ui文件上傳,所以才一直導致我提交不聊數據(說到這裏,真心心塞,因爲自己太菜了)貼代碼

後臺需要的代碼格式是這樣的，因爲之前沒有理解文檔，也沒有嘗試過上傳文件，不知道element-ui上傳的文件默認就是binary的，所以才一直沒有寫出來

我的數據

data() {
    return {
      formData: new FormData(),
      cdKey: "",
      username: "123456",
      password: "123456",
      shopCompany: {
        corporationName: ""
      }
    };
  },

<el-form-item label="圖片">
    <el-upload class="upload-demo" 
    action="url"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :auto-upload="false"
    :on-change="onUploadChang"
    list-type="picture">
        <el-button size="small" type="primary">點擊上傳</el-button>
    </el-upload>
</el-form-item>

    handleRemove(file, fileList) {//on-remove--移除/刪除待上傳列表中的圖片觸發的事件
      console.log(file, fileList);
    },
    handlePreview(file) {//on-preview--點擊待上傳列表中的圖片所觸發的事件
      console.log(file);
    },
    onUploadChang(file, fileList) {//on-change--點擊上傳圖片,選擇圖片確定後就會觸發的事件
      this.formData.append("file1", file.raw);
    },

在控制檯打印的file和fileList結果分別是:

file裏面存儲的就是上傳的圖片/文件的相關信息

在表單提交的時候直接將formData這個參數返回給後臺就可以了

let abcd = JSON.stringify(this.shopCompany);
      let abc = qs.stringify({
        cdKey: this.cdKey,
        username: this.username,
        password: this.password
      });
      this.formData.append("cdKey", this.cdKey);
      this.formData.append("username", this.username);
      this.formData.append("password", this.password);
      this.formData.append("shopCompany", abcd);

提交的時候驗證所有數據不能爲空,然後直接將數據formData傳給後臺就可以,最終我的請求就成功了

其實我還是不理解爲什麼要這樣提交才能提交成功,可以下次再遇到這樣的數據提交,我能完整的寫下來,但是可能並不理解

需要多研究纔行