elementUI中檔案上傳upload的使用

2022-05-05 18:27:06 字數 1736 閱讀 5255

由於本人是vue小白,很菜,而且介面呼叫的不熟練,遇到很多問題。  使用elementui中upload,搗鼓的一天,求助各位好友,才解決這個問題,以此來記錄,以防日後又忘記怎麼使用的。

1、首先拿到後端的postman的介面,經過測試,介面無誤,如圖:

2、寫前端**,下面寫了乙個簡單的示例,看**,以及效果圖:

1

<

template

>

2<

div

class

="inner"

>

3<

label

class

="el-form-item__label"

>上傳檔案

label

>45

<

el-upload

6name

="apkfile"

7:action

="uploadaction"

8:on-success

="filesuccess"

9drag

>

10<

i class

="el-icon-upload"

>

i>

11<

div

class

="el-upload__text"

>將檔案拖到此處,或<

em>點選上傳

em>

div>

12el-upload

>

1314

div>

15template

>

16<

script

>

17export

default;24

},25

methods:

32},

33beforeremove(file, filelist) ?`);

35},

36handleremove(file,fileslist),39}

40}41script

>

解釋: el-upload中: (1) name中的 』apkfile『是給後台傳的引數,對應介面截圖中的 apkfile;

(2)action 中的 uploadaction,是我自己定義的乙個變數,裡面存放著 完整的介面,我的介面是

'api/cloudshop/admin/version/versionfileupload',其中 api 是我使用****,要不然會有跨域問題。 

之前一直不明白action裡面放什麼東西,浪費了大量時間搞這個東西,action中存放的就是完整的介面;

(3)fileurl,我自己接收返回的data鏈結,扔到這裡面。

效果圖:

傳送請求後,成功的效果圖:

3、總結: 這是個入門級的,為以後更複雜的檔案上傳,給我鋪了個路,以後遇到問題,繼續補充。

element ui中上傳檔案upload

name targetfile ref upload with credentials true limit 5 file list filelist data mydata action uploadurl headers myheader on change addfile on remove ...

elementUI檔案上傳 判斷檔案型別

在用el upload上傳元件的時候需要注意 accept 官網上講可以控制檔案上傳的型別,但實際上並不可以 還需要土方法 獲取檔案字尾名進行判斷 進行控制 limit 不是很好用 它雖然限制了檔案只能上傳乙個,但是你選擇了乙個 就不能再去選擇第二個檔案,正常情況下測試想要選擇第二個,然後最後乙個是...

用element ui進行檔案的上傳

在進項的專案中,我使用vue配合element搭建的專案,現在需要用到上傳檔案的寫法!現在列舉下我的專案中所使用的上傳檔案的方法!選取檔案 匯入 上傳檔案有多重方式來進行,這裡敘述下手動上傳的方法,並且用了請求的攔截。如果你的上傳不需要其他的引數,那麼你可以直接通過action填寫上傳位址來進行,如...