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

这边博文主要介绍的是使用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);
        }

    }