您的位置:

深入探讨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();
  },
},