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

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

element-ui中的上传文件 --Upload 上传 覆盖原来的上传方法,限制文件类型_第1张图片
element-ui中的上传文件 --Upload 上传 覆盖原来的上传方法,限制文件类型_第2张图片

你可能感兴趣的:(vue)