深入探討el-upload上傳視頻

一、el-upload上傳視頻後點擊刪除

el-upload組件是element-ui提供的一個上傳組件，支持拖拽上傳、文件類型限制、進度條顯示等功能，但是有時會遇到點擊刪除按鈕後視頻並未從頁面上刪除的問題。

這是由於el-upload組件默認只刪除已上傳成功的文件，而未上傳成功的文件需要手動使用remove方法進行刪除。因此，我們需要在delete-file方法內部加上remove方法。

  


methods: {
  handleRemove(file) {
    const index = this.fileList.indexOf(file);
    if (index !== -1) {
      this.fileList.splice(index, 1);
    }
    this.$refs.upload.remove(file); // 手動刪除未成功上傳的文件
  },
},

二、el-upload上傳出現重複數據

由於上傳時非同步處理並發的限制和網路中斷等因素，el-upload組件可能會存在出現重複數據情況的問題。為了解決這個問題，我們可以在上傳文件之前先對已上傳的文件進行比對，若已存在則不再上傳。

  


methods: {
  beforeUpload(file) {
    const existFile = this.fileList.find(item => item.name === file.name);
    if (existFile) {
      this.$message.warning(`${file.name} 已存在，無需重複上傳！`);
      return false; // 阻止上傳
    } else {
      this.uploading = true;
      return true; // 允許上傳
    }
  },
},

三、el-upload上傳圖片

除了上傳視頻，我們還可以使用el-upload組件進行圖片上傳。與普通文件上傳相比，圖片上傳需要將成功上傳圖片的圖片鏈接返回到前端，因此需要進行額外的處理。

  
  
  


data() {
  return {
    imageUrl: '',
  };
},
methods: {
  beforeUpload(file) {
    const isJPG = file.type === 'image/jpeg';
    const isPNG = file.type === 'image/png';
    if (!isJPG && !isPNG) {
      this.$message.error('上傳頭像圖片只能是 JPG/PNG 格式!');
      return false;
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      this.$message.warning('上傳頭像圖片大小不能超過 2MB!');
      return false;
    }
  },
  handleSuccess(response) {
    if (response.code === 1) {
      this.imageUrl = response.url;
      this.$message.success('上傳成功');
    } else {
      this.$message.error(response.msg);
    }
  },
},

四、el-upload批量上傳

el-upload組件支持同時上傳多個文件的功能。可以通過設置multiple屬性，來允許選擇多個文件。

五、el-upload終止上傳

在上傳多個文件時，有時可能需要中途終止上傳。可以通過ref屬性獲取到el-upload組件的實例，調用abort方法中止上傳。

  


methods: {
  abortUpload() {
    this.$refs.upload.abort();
  },
},

六、el-upload上傳文件夾

el-upload組件還支持上傳整個文件夾，通過設置directory屬性為true即可。

七、el-upload自定義上傳

el-upload組件允許我們自定義上傳，可以通過配置headers、data等屬性來實現自定義上傳。下面是一個示例代碼：

  


methods: {
  getToken() {
    // 獲取token
  },
  getUserInfo() {
    // 獲取用戶信息
  },
},

八、el-upload手動上傳

如果不想開啟自動上傳，手動進行上傳也是可行的。可以通過refs獲取到el-upload組件的實例，調用upload方法實現手動上傳。

  


methods: {
  startUpload() {
    this.$refs.upload.upload();
  },
},

九、el-upload上傳超時時間設置

el-upload組件默認的超時時間是30秒，如果需要更改上傳超時時間，可以通過設置timeout屬性實現。

十、el-upload上傳之前清除數據

在上傳多個文件時，有時需要在重新選擇文件之前清空已選文件列表，可以調用clearFiles方法實現清空操作。

  


methods: {
  clearFileList() {
    this.$refs.upload.clearFiles();
  },
},