Binding corresponding elements when uploading components using multiple Element-ui upload in a page

Elemet-ui provides the upload file upload component, the function is very powerful, can meet the needs of individual use, but sometimes there will be multiple reuse upload component requirements, such as the appearance, this time there is a problem, the page has multiple upload components, how to operate it?

Previously found on the Internet a great God method, modify the source code, add a parameter in the callback function, but this method is not very applicable in multi-person development, because this requires everyone to modify the source code, here is attached the method of the great God, you can use as appropriate

First, find node_modules/element-ui/lib/element-ui.common.js in your next bag.

And then add a pass parameter to the props in the inside, custom parameter name

Then go down and find the function you need to use, and add this parameter to the parameter you added.

This will be changed, back to the project, at the time of reference to pass this parameter in, is usually indexed, if it is in the loop, the index

After the parameter is passed, you can get this value in the callback function you just changed so that you can get every upload component in the loop.

handleproceduresuccess (res, file, FileList, index) {    ///  Previous three parameters are component defaults, and the last parameter is the one we passed in.   }

This way by modifying the method of the source code to achieve, the great God also provides another way, is the component two times package, but not too understand, interested can go to the great God's blog to see, the following is the article address

Https://www.cnblogs.com/AlexBlogs/p/7150532.html

In fact, there is a simple way of writing, also is two times package, but directly in the call to write

Through this method of closure, the default parameters and their own new parameters as a new function to return, you can also implement the function, here to note, it is best not to use the arrow function, because some IE does not support ES6 syntax, may not be able to page out, write this common function is good

There is a need should also be very often used, that is the hidden upload button, the official does not provide hidden methods, although there is a way to provide restrictions, but still more want to reach the upload image number to the upper limit after the upload box hidden, here to share a method, through the CSS control upload box hidden

Define the styles in CSS first, control the hidden by dynamically adding class names in the component, which is used in conjunction with the Element-ui table table, with the length control of the file list

Binding corresponding elements when uploading components using multiple Element-ui upload in a page