深入了解el-uploaddata

一、上傳文件的基本使用

el-uploaddata是基於element-ui所提供的上傳文件組件，可以實現文件的選擇、拖拽、上傳等功能。下面是一個簡單的示例：

  
    <el-uploaddata
      class="upload-demo"
      action="https://jsonplaceholder.typicode.com/posts/"
      :file-list="fileList">
      <el-button size="small" type="primary">點擊上傳</el-button>
      <div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過500kb</div>
    </el-uploaddata>
  

其中，class=”upload-demo”表示樣式的類名，可以根據自己的需求進行定義；action屬性是上傳的地址；file-list屬性是文件列表，我們需要定義一個data屬性來存儲，這樣上傳成功的文件就會添加到列表中；slot=”tip”表示提示信息的插槽名稱，這裡的提示信息是自定義的。

可以看到，el-uploaddata提供了非常方便的上傳文件功能，可以適應大多數場景。接下來我們將詳細介紹它的各種使用方法。

二、多文件上傳

有些情況下，我們需要同時上傳多個文件。此時，我們可以添加multiple屬性，然後修改之前的data屬性為數組即可：

  
    <el-uploaddata
      class="upload-demo"
      action="https://jsonplaceholder.typicode.com/posts/"
      :file-list="fileList"
      multiple>
      <el-button size="small" type="primary">點擊上傳</el-button>
      <div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過500kb</div>
    </el-uploaddata>
  

三、限制上傳的文件類型和大小

有些情況下，我們需要限制上傳的文件類型、大小等。這裡我們可以使用before-upload屬性，來進行校驗。我們可以定義一個函數，在上傳之前對文件進行大小、類型等方面的判斷，僅當滿足條件時才允許上傳。下面是一個例子：

  
    <el-uploaddata
      class="upload-demo"
      action="https://jsonplaceholder.typicode.com/posts/"
      :file-list="fileList"
      :before-upload="beforeUpload">
      <el-button size="small" type="primary">點擊上傳</el-button>
      <div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過500kb</div>
    </el-uploaddata>
  

然後我們需要定義一個beforeUpload方法：

  
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上傳頭像圖片只能是 JPG 或 PNG 格式');
      }
      if (!isLt2M) {
        this.$message.error('上傳頭像圖片大小不能超過 2MB');
      }
      return isJPG && isLt2M;
    }
  

在這個例子中，我們限制了上傳的文件類型只能為JPG或PNG格式，並且文件大小不能超過2MB。如果上傳的文件不符合條件，就會彈出提示信息。如果符合條件，就會返回true，然後進行上傳操作。

四、拖拽上傳

使用el-uploaddata，我們還可以通過drag屬性，來實現拖拽上傳。具體實現方法如下：

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

其中，i標籤和div標籤中的內容為拖拽上傳時的界面，可以根據自己的需求進行修改。

五、圖片預覽

除了上傳文件以外，el-uploaddata還提供了對上傳圖片的預覽功能。我們只需要添加一個預覽的插槽即可：

  
    <el-uploaddata
      class="upload-demo"
      action="https://jsonplaceholder.typicode.com/posts/"
      :file-list="fileList"
      :on-preview="handlePictureCardPreview">
      <i class="el-icon-plus"></i>
      <div class="el-upload__text">將文件拖到此處，或<em>點擊上傳</em></div>
      <div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過2MB</div>
      <div v-if="dialogImageUrl" class="image-dialog">
        <img :src="dialogImageUrl" alt="" />
      </div>
    </el-uploaddata>
  

然後再定義一個handlePictureCardPreview方法：

  
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
  

在這個例子中，我們添加了一個與el-uploaddata同級的div標籤，用於存儲圖片預覽的界面。預覽的功能可以通過on-preview屬性來實現，然後我們需要定義一個handlePictureCardPreview方法，在該方法中設置預覽圖片的地址和彈窗的可見性。

通過以上幾個例子，我們可以看到el-uploaddata提供了豐富的上傳文件的功能，不僅可以滿足基本的上傳需求，也可以通過一些屬性和方法，靈活定製自己需要的功能。同時，element-ui的組件庫也提供了其他一些上傳文件相關的組件，如el-uploaddragger、el-upload、el-uploader等，可以根據自己的具體需求進行選擇。