vue in el-upload upload multiple pictures and carry parameters, rather than one by one batch of solution

Now the basic front-end technology stack is not vue react technology stack.

vue technology stack is the most common element-ui ui framework of the.

In the project, we often encounter this demand: bulk upload

element-ui indeed provides us <el-upload> such components, colleagues exposed a lot of properties and methods for our use.

But many people have encountered such a problem: the project needs is a bulk upload, but why upload their own time, that successful, but it is one by one upload, upload this way sometimes does not violate our needs, but sometimes it is not what we need. So, how to solve the bulk upload parameters and carry it, I wrote here a demo,

For your reference:

 1 <template>
 2   <div>
 3     <el-form>
 4       <el-form-item>
 5         <el-upload
 6           ref="upload"
 7           action="/as"
 8           multiple
 9           :http-request="handleUpload"
10           :auto-upload="false"
11           :limit="20">
12           <el-button size="small" type="Primary " Click Upload></ EL-Button > 
13 is            < div slot = "Tip" class = "EL-upload__tip" > can upload jpg / png file, and not more than 500KB </ div > 
14          </ EL-Upload > 
15        </ EL- Item-form > 
16        < EL-form-Item > 
. 17          < EL Button- type = "Primary" @click = "handlePush" > Post </ EL-Button > 
18 is        </ EL-form-Item > 
. 19      </el-form>
20     
21   </div>
22 </template>
23 <script>
24 import axios from 'axios'
25 import { mapGetters } from 'vuex'
26 export default{
27   data() {
28       return {
29         files:[]
30       };
31     },
32   computed:{
33     ...mapGetters([
34       'taxno',
35       'username ' 
36      ])
 37 [    },
 38 is    Methods: {
 39      HandleUpload (RAW) {
 40        the this .files.push (raw.file);
 41 is      },
 42 is      the async handlePush () {
 43 is        the this $ refs.upload.submit (). // here is a function to perform file upload, in fact, it is to get our files to upload 
44        the let fd =  new new FormData ();
 45        fd.append ( ' operator ' , the this .username)
 46        fd.append ( ' reimment ' , " Ni Tutu" )
 47        fd.append ( ' the deptname ' , " Technology " )
 48        fd.append ( ' taxno ' , the this .taxno)
 49        the this .files.forEach ( function (File) {
 50          fd.append ( ' File ' , file, file.name); // because you want to upload multiple files, you need to look at the job traverse 
51          // do not directly use our array of files to upload, you'll find the background is passed to two Object 
52        })
 53        axios.post (process.env.BASE_API + ' / File / moreFileUpload',fd).then(res=>{
54         if(res.data.status==='OK'){
55           console.log(res)
56         }
57       })
58     }
59   }
60 }
61 </script>

Because <el-upload> the action attribute is required, so if that is not the default upload, casual setting where a string on it.

If you do check the parameters carry, you can check with the form. When the check and then transferred through the upload interface on it.

 

Hopefully this article for your help!

Please indicate the source: walls of brick garden blog 2019-07-30 "vue in el-upload upload multiple pictures and carry parameters, bulk rather than one by one solution."