天天看點

關于el-upload上傳圖檔

今天做項目的時候突然發現自己有上傳圖檔的需求,想着Element自帶有上傳圖檔的功能,于是就理所當然的用了起來,背景接口寫好了,經過PostMan測試也沒有問題,但是一用el-upload就給我提示400,頭痛!!!!

關于el-upload上傳圖檔

幸好我比較聰明(哈哈哈!允許我自誇一下),我們從Element的官方示例代碼來看。

<el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  multiple
  :limit="3"
  :on-exceed="handleExceed"
  :file-list="fileList">
  <el-button size="small" type="primary">點選上傳</el-button>
  <div slot="tip" class="el-upload__tip">隻能上傳jpg/png檔案,且不超過500kb</div>
</el-upload>
           

隻能看得懂action标簽是什麼意思,但是我把我的背景url替代上去卻沒什麼用。由于第一次了解這個标簽,仔細看了會官方的屬性說明,隻有file-list屬性讓我有些奇怪,但是我後來了解到,當你上傳檔案成功時。

關于el-upload上傳圖檔

這些檔案屬性會被自動儲存到fileList中(file-list關聯的數組),其實這個時候我最懷疑的時參數名的問題,PostMan是有參數名可填的,但是el-upload沒有,是以我一直在找el-load設定參數名的地方,但是我沒看到(或者說,其實我想到了另一種方法然後放棄了,哈哈哈!)

關于el-upload上傳圖檔

(谷歌的)

關于el-upload上傳圖檔

(這是火狐的)

上面是我在http請求包裡看到的請求參數的名稱(name=“file”,file就是參數名稱,要知道怎麼檢視請求包,嗯...百度吧...看之前先發送請求,不然沒有記錄),然後我就在背景接口使用了參數綁定。

關于el-upload上傳圖檔

然後就能取到MultipartFile的值了,然後就可以正确的進行圖檔的上傳操作,但是首先得保證在PostMan測試時成功的。

如果把參數名綁定到接口,官方的示例代碼不用改就可以直接使用了。

說了這麼多廢話,其實一兩句就能說清的,也算是記錄一下解決問題的思路吧。

最後還有!!!!

el-upload的參數名設定的屬性是通過name屬性來設定的。(眼瞎了。。。)

關于el-upload上傳圖檔
關于el-upload上傳圖檔

這麼寫就可以在前台修改參數名稱,不用去背景修改了。(這個最重要,上面都是廢話。)

因為在遇到這個問題時,在網上沒找到什麼有用的方法,官方文檔又不詳細,是以就試着自己去解決了。(還是很簡單的)