这边博文主要介绍的是使用element-ui的upload上传组件实现自定义多图上传的方式。
element-ui的upload上传组件，如果是多图上传，实际上在请求中为单个文件上传，只是提交方法中自循环，直至上传文件列表为空为止。
不多说上代码：
HTML：
<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'><el-button size="small" type="primary">点击上传</el-button><div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div></el-upload>
<el-button @click = 'submitAssess'>提交到服务器</el-button>
JS：
uploadOverrun: function() {this.$message({type: 'error',message: '上传文件个数超出限制!最多上传5张图片!'});},changeUpload: function(file, fileList) {//预览图片this.fileList = fileList;this.$nextTick(() => {let upload_list_li = document.getElementsByClassName('el-upload-list')[0].children;for (let i = 0; i < upload_list_li.length; i++) {let li_a = upload_list_li[i].children[0];let imgElement = document.createElement("img");imgElement.setAttribute('src', fileList[i].url);imgElement.setAttribute('style', "max-width:50%;padding-left:25%");if (li_a.lastElementChild.nodeName !== 'IMG') {li_a.appendChild(imgElement);}}})},submitUpload: function(content) {//自定义的上传图片的方法//1. 创建formData 利用AXIOS传递let formData = new FormData;formData.append('file', content.file);let config = {'Content-Type': 'multipart/form-data'}let var_this = this;axios.post('/Index/upload', formData, config).then(function(response) {if (!response.data.success) {var_this.$message({message: response.data.message,type: 'error'});}}).catch(function(error) {console.log(error);})},submitAssess: function() {this.$refs.upload.submit(); //调用submit方法//其他业务代码。}
php
public function upload(){//上传文件if(!empty($_FILES)) {if(!empty($_SESSION)){//拼接路径$filePathArr = explode('/', $_SERVER['SCRIPT_FILENAME']);array_pop($filePathArr);$filePath = implode('/', $filePathArr);$filePath .= '/static/upload/';if(!is_dir($filePath)){ //创建文件夹mkdir($filePath);}$filePath .= Session::get('user').'-->'.md5(time()).$_FILES['file']['name'];if(move_uploaded_file($_FILES["file"]["tmp_name"],$filePath)){$filePath = str_replace($_SERVER['CONTEXT_DOCUMENT_ROOT'],"",$filePath);//其他业务代码.我在制作此处时，我先将图片存入数据库}else{$data = returnData(false,'对不起,操作失败!请稍候再试!');}}else{$data = returnData(false,'请登录后再试!');}echo json_encode($data);}}
