vue2.0 使用element-ui里的upload组件实现多图上传。采用FORMDATA的方式上传

原文地址：https://blog.youkuaiyun.com/a12541254/article/details/79187130

这边博文主要介绍的是使用element-ui的upload上传组件实现自定义多图上传的方式。

element-ui的upload上传组件，如果是多图上传，实际上在请求中为单个文件上传，只是提交方法中自循环，直至上传文件列表为空为止。

不多说上代码：

HTML：

[html]  view plain  copy

1. <el-upload class="upload-demo" action="http://localhost:80" :limit='5' :auto-upload="false" :on-exceed='uploadOverrun' ref="upload" :http-request='submitUpload' :on-change='changeUpload'>  
2.       <el-button size="small" type="primary">点击上传</el-button>  
3.       <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>  
4. </el-upload>  

[html]  view plain  copy

1. <el-button @click = 'submitAssess'>提交到服务器</el-button>  

JS：

[javascript]  view plain  copy

1. uploadOverrun: function() {  
2.                 this.$message({  
3.                     type: 'error',  
4.                     message: '上传文件个数超出限制!最多上传5张图片!'  
5.                 });  
6.             },  
7.             changeUpload: function(file, fileList) {//预览图片  
8.                 this.fileList = fileList;  
9.                 this.$nextTick(  
10.                     () => {  
11.                         let upload_list_li = document.getElementsByClassName('el-upload-list')[0].children;  
12.                         for (let i = 0; i < upload_list_li.length; i++) {  
13.                             let li_a = upload_list_li[i].children[0];  
14.                             let imgElement = document.createElement("img");  
15.                             imgElement.setAttribute('src', fileList[i].url);  
16.                             imgElement.setAttribute('style', "max-width:50%;padding-left:25%");  
17.                             if (li_a.lastElementChild.nodeName !== 'IMG') {  
18.                                 li_a.appendChild(imgElement);  
19.                             }  
20.                         }  
21.                     })  
22.             },  
23.             submitUpload: function(content) {//自定义的上传图片的方法  
24.                 //1. 创建formData 利用AXIOS传递  
25.                 let formData = new FormData;  
26.                 formData.append('file', content.file);  
27.                 let config = {  
28.                     'Content-Type': 'multipart/form-data'  
29.                 }  
30.                 let var_this = this;  
31.                 axios.post('/Index/upload', formData, config)  
32.                     .then(function(response) {  
33.                         if (!response.data.success) {  
34.                             var_this.$message({  
35.                                 message: response.data.message,  
36.                                 type: 'error'  
37.                             });  
38.                         }  
39.                     })  
40.                     .catch(function(error) {  
41.                         console.log(error);  
42.                     })  
43.             },  
44. submitAssess: function() {this.$refs.upload.submit(); //调用submit方法  
45.              //其他业务代码。  
46.          }  

php

[php]  view plain  copy

1. public function upload(){  
2.         //上传文件  
3.         if(!empty($_FILES)) {  
4.             if(!empty($_SESSION)){  
5.                 //拼接路径  
6.                 $filePathArr = explode('/', $_SERVER['SCRIPT_FILENAME']);  
7.                 array_pop($filePathArr);  
8.                 $filePath = implode('/', $filePathArr);  
9.                 $filePath .= '/static/upload/';  
10.                 if(!is_dir($filePath)){ //创建文件夹  
11.                     mkdir($filePath);  
12.                 }  
13.                 $filePath .= Session::get('user').'-->'.md5(time()).$_FILES['file']['name'];  
14.                 if(move_uploaded_file($_FILES["file"]["tmp_name"],$filePath)){  
15.                     $filePath = str_replace($_SERVER['CONTEXT_DOCUMENT_ROOT'],"",$filePath);  
16.                     //其他业务代码.我在制作此处时，我先将图片存入数据库  
17.                       
18.                 }else{  
19.                     $data = returnData(false,'对不起,操作失败!请稍候再试!');  
20.                 }  
21.             }else{  
22.                $data = returnData(false,'请登录后再试!');  
23.             }  
24.             echo json_encode($data);  
25.         }  
26.   
27.     }