element-ui中的上传文件 --Upload 上传 覆盖原来的上传方法，限制文件类型

Posted 2022-11-30 简单的小伙子

<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>
<script>
  export default 
    data() 
      return 
        fileList: [name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100', name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100']
      ;
    ,
    methods: 
      handleRemove(file, fileList) 
        console.log(file, fileList);
      ,
      handlePreview(file) 
        console.log(file);
      ,
      handleExceed(files, fileList) 
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 $files.length 个文件，共选择了 $files.length + fileList.length 个文件`);
      ,
      beforeRemove(file, fileList) 
        return this.$confirm(`确定移除 $ file.name ？`);
      
    
  
</script>

其中有这样几个属性：

auto-upload	是否在选取文件后立即进行上传	boolean	—	true
http-request	覆盖默认的上传行为，可以自定义上传的实现	function	—	—