element UI框架自定义上传文件及图片

1. 看见没有先把这个方法写在<el-upload> 里面。
2. 看见了吗 这个是必填的 所以也要填上在<el-upload>里 当然我们不用这个地址 所以写个##### 就行了~
3. html5这样写（防止时间长了看不懂已经尽力注释了。。）

<el-upload
        ref="upload"                      
        :http-request="httpRequest"
        action="########"
        :file-list="fileList"           //***上传文件列表非常重要！jingliang
        list-type="picture-card"        //文件列表的类型 
        multiple                        //是否支持多选文件     
        :limit="limitNum"               //最大允许上传个数
        :auto-upload="false"            //是否在选取文件后立即进行上传
        :accept="'.pdf, .jpg, .png, .pdf, .docx, .doc, .jpg, .png , .xls ,.xlsx'"
        :before-upload="beforeUploadFile" //上传文件之前的钩子
        :on-change="fileChange"         //文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
        :on-exceed="exceedFile"         //文件超出个数限制时的钩子
        :on-success="handleSuccess"     //文件上传成功的钩子
        :on-error="handleError"         //文件上传失败的钩子 
      >
        <i slot="default" class="el-icon-plus"></i>
        <div slot="file" slot-scope="{file}">
          <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
          <span class="el-upload-list__item-actions">
            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
              <i class="el-icon-zoom-in"></i>
            </span>
            <span class="el-upload-list__item-delete" @click="handleRemove(file)">
              <i class="el-icon-delete"></i>
            </span>
          </span>
        </div> 
        <div
          slot="tip"
          class="el-upload__tip"
        >只能上传 jpg , png , pdf , docx , doc, xls , xlsx格式的文件，且不超过10MB。</div>
      </el-upload>
      <el-button size="small" type="success" @click="submitUpload" style="margin-top:30px">上传到服务器</el-button>

4. js部分submitUpload函数就是上传到服务器里了···

  data() {
    return {
      formData: "", //上传服务器数据
      limitNum: 20,
      fileList: [], //上传文件列表
      //file: [] //上传文件信息
      dialogImageUrl: "", //缩略图
      dialogVisible: false, //缩略图开关
      UploadSwitch: false,
    };
  },

 // 文件状态改变时的钩子
    fileChange(file, fileList) {
      this.fileList = fileList;  //这个函数***非常关键***
    },
    httpRequest(file) {
      //这里啥都不用写。。。 想不到吧
    },
    submitUpload(file) {
      for (let index in this.fileList) {
        let extension = this.fileList[index].name.substring(
          this.fileList[index].name.lastIndexOf(".") + 1
        );
        let size = this.fileList[index].size / 1024 / 1024;
        /* 验证上传格式  extension后缀名*/
        if ( 
          extension !== "png" &&
          extension !== "jpg" &&
          extension !== "pdf" &&
          extension !== "docx" &&
          extension !== "doc" &&
          extension !== "xlsx" &&
          extension !== "xls"
        )  {
          console.log(extension);
          this.$notify.warning({
            title: "警告",
            message: `只能上传pdf,jpg,png,docx,doc,xlsx,xls格式的文件`,
          });
          return;
        }
        /* 验证上传大小 */ 
        if (size > 10) {
          this.$notify.warning({
            title: "警告",
            message: `文件大小不得超过10M`,
          });
          return;
        }
      }
      if (this.fileList.length === 0) {
        this.$message.warning("请选取文件");
        return;
      }
      this.$refs.upload.submit(); //执行此步骤 相当于执行 http-request 的自定义实现方法

      this.formData = new FormData();
      //因为要传一个文件数组过去，所以要循环append
      this.fileList.forEach((item) => {
        this.formData.append("files", item.raw);
      });
      this.formData.append("projectId", this.form.projectId);
      this.formData.append("fileType", this.fileType); 
      
        Upload(this.formData)  //Upload()是后台接口
          .then((res) => {
            //自行处理各种情况
            
            console.log(res, "上传成功点击上传服务器 下标为", this.upLoadIndex); 
            this.$emit("onChangeOpen", true);
            this.$message({
              message: "文件上传成功",
              type: "success",
            });
          })
          .catch(() => {
            // xxx
          });
       
    },