el-upload上傳組件 - 僅上傳一個文件或圖片，且隱藏掉選擇文件框（或+號）

 

如上圖所示，需要解決的問題就如圖所示：

解決方案：

1. 定位需要隱藏的虛框element；

2. 設置虛框的style。

具體代碼：（vue.js實現方案）

1. /////隱藏定位的目標element
let upload_div = $('.avatar-uploader-cover')[0].childNodes[0];
// this.removeClassName(upload_div,'el-upload');
upload_div.style.cssText = "display: none;";//設置目標element的style內容
2. /////顯示定位的目標element
let upload_div = $('.avatar-uploader-cover')[0].childNodes[0];
// this.removeClassName(upload_div,'el-upload');
upload_div.style.cssText = "";

3. 具體的前端代碼：

<el-upload
  action=""
  ref="template_cover"
  list-type="picture"
  :limit = "parseInt('1')"
  :on-exceed="limit_control"
  :on-success="handleSuccess"
  :before-upload="templateCoverbeforeUpload"
  :on-change="figure_on_change"
  :before-remove="berfore_figure_remove_handler"
  :on-preview="on_preview_template_img"
  :on-remove="handleRemove"
  :auto-upload="false"
  class="avatar-uploader-cover"
  accept=".jpg, .png, .jpeg"
>

其中avatar-uploader-cover就是其class，也是用來定位的標準；

 

4. 簡單解析一下網頁源碼中el-upload裏的元素結構：