踩坑總結！elementUI組件之upload上傳控件的multiple屬性，設置false報錯！

踩坑總結！elementUI組件之upload上傳控件的multiple屬性，設置false報錯！

在使用elementUI組件中的upload上傳按鈕控件的時候，其中的multiple屬性決定了是否可以 多選文件 ，首先看一下官方文檔：

 

看到multiple參數的類型是boolean，如果簡單的以爲“它的值要麼是true，要麼是false”，那就錯了，完美踩坑！！！

仔細看一下demo中的代碼：

一、demo1的用法：可多選，最多同時選擇3個文件

<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>

二、demo2的用法：可多選，無個數限制

<el-upload
  class="upload-demo"
  drag
  action="https://jsonplaceholder.typicode.com/posts/"
  multiple>
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">將文件拖到此處，或<em>點擊上傳</em></div>
  <div class="el-upload__tip" slot="tip">只能上傳jpg/png文件，且不超過500kb</div>
</el-upload>

三、demo3的用法：可多選，無個數限制（但是控制檯會報錯！）

<el-upload
   class="pic"
   multiple="true"
   :http-request="handlePicUpload"
   :data="extraData"
   :on-preview="handlePreview"
   :on-remove="handleRemove"
   :file-list="fileList"
   list-type="text">
<el-button size="small" type="primary">點擊上傳</el-button>
<div slot="tip">只能上傳jpg/png文件</div>
</el-upload>

 四、當我們不想同時選擇多個文件時，只需要不設置該屬性即可：

<el-upload
   class="pic"
   :http-request="handlePicUpload"
   :data="extraData"
   :on-preview="handlePreview"
   :on-remove="handleRemove"
   :file-list="fileList"
   list-type="text">
<el-button size="small" type="primary">點擊上傳</el-button>
<div slot="tip">只能上傳jpg/png文件</div>
</el-upload>

總結：

multiple屬性雖然是Boolean類型的，但不能將其值設置爲true或者false！！！（控制檯都能看到錯誤提示）

給控件加了multiple屬性，就表示可以多選，通過limit設置多選的個數限制，當不需要多選（只想單選文件）時，不加multiple屬性即可。