Element: [Bug Report] validate upload component

[amitneg1]

Element UI version

1.3.7

OS/Browsers version

all

Vue version

2.3.3

Reproduction Link

https://github.com/Monotype/cs-mep-ui

Steps to reproduce

I need help on upload component of element.io library. I am using "multiple" file upload option. I have to restrict user not to upload less than 8 files. But user can upload more than 8 files. please help me how can i add validation.

What is Expected?

I need help on upload component of element.io library. I am using "multiple" file upload option. I have to restrict user not to upload less than 8 files. But user can upload more than 8 files. please help me how can i add validation.

What is actually happening?

As of now user is able to upload n number of multiple files.

[BaffinLee]

Hello, you can set on-chang attribute to a method name, to handle the file list change event.
That method will be called every time the file list change, such as, add file, delete file, file upload error occur.
You will get two arguments in that method, the first is the file which changed, the second is the file list array.
So you can see if the file list array's length is greater than 8, show a tip to your user tell then not do it, and delete the last file.

You can get official documents from this link

Here is a example below:

<el-upload
  class="upload-demo"
  action="https://example.com"
  :on-change="handleChange"
  :file-list="fileList"
  multiple>
  <el-button size="small" type="primary">upload</el-button>
</el-upload>

<script>
  export default {
    data() {
      return {
        fileList: []
      };
    },
    methods: {
      handleChange(file, fileList) {
        if (fileList.length > 8) {
          this.$message.error('Do not upload more than 8 files');
          this.fileList = fileList.slice(0, 8);
        }
      }
    }
  }

[mtocchetto]

Another option is just use the component without the property "file-list" and manipulate the fileList parameter of the "on-change" method to remove the undesired elements.

Take a look on the pop and splice methods from the Array object.

Working example: https://jsfiddle.net/mtocchetto/roacty5x/

[mtocchetto]

I cannot understand why the watcher always change the status attribute of all files to 'success' even before the upload to the server.

I did my tests using the properties

ref="upload"
:file-list="fileList",
:auto-upload="false"

File: https://github.com/ElemeFE/element/blob/v1.3.7/packages/upload/src/index.vue

Code block [line 107]:

  watch: {
    fileList: {
      immediate: true,
      handler(fileList) {
        this.uploadFiles = fileList.map(item => {
          item.uid = item.uid || (Date.now() + this.tempIndex++);
          item.status = 'success';
          return item;
        });
      }
    }
  },

This status is checked inside the submit method and because its changed the upload will not be executed when calling this.$refs.upload.submit().

Code block [line 193]:

    submit() {
      this.uploadFiles
        .filter(file => file.status === 'ready')
        .forEach(file => {
          this.$refs['upload-inner'].upload(file.raw);
        });
    },