upload组件实现图片上传，图片上传，上传图片，上传头像，批量上传图片前后端逻辑

1.主要使用el-ui的upload组件。代码如下，最主要的就是将上传的文件转化为当前的url显示在页面

主要代码如下，基于vue的：

<template>
  <div>
    <el-upload
                accept="image/png,image/gif,image/jpg,image/jpeg"
                ref="rebateUpload"
                class="avatar-uploader"
                :limit="1"
                :before-upload="beforeUpload"
                :file-list="fileList"
                :on-change="getLocalImg"
                :on-exceed="uploadExceed"
                :show-file-list="false"
                action="#"
              >
                <div class="show_img" v-if="isHidden">
                  <i
                    class="el-icon-plus"
                    style="color: #d9d9d9; margin-top: 15px"
                  ></i>
                  <p style="font-size: 14px; color: #d9d9d9">上传照片</p>
                </div>
                <img
                  class="show_img"
                  v-if="!isHidden"
                  :src="path"
                  width="100%"
                  height="100%"
                />
              </el-upload>
  </div>
  
</template>

<script>
  export default {
    data () {
      return {
        fileList: [],
        file:'',//传递给后端的文件
        isHidden:true,
        path:'',
      }
    },
    methods: {
      // 获取上传图片的本地url，用于上传前的本地预览
      getLocalImg(event, fileList) {
      let url = "";
      if (window.createObjectURL !== undefined) {
        url = window.createObjectURL(event.raw);
      } else if (window.URL !== undefined) {
        url = window.URL.createObjectURL(event.raw);
      } else if (window.webkitURL !== undefined) {
        url = window.webkitURL.createObjectURL(event.raw);
      }
      this.path = url;
      this.isHidden = false;
      let self = this;
      //强制刷新，嵌套太深
      self.$forceUpdate();
    },
    beforeUpload(file) {
      this.file = file;//传给后端的值
      const promise = new Promise((resolve) => {
        this.$nextTick(function () {
          resolve(true);
        });
      });
      return promise;
    },
    uploadExceed(files, fileList) {
      this.$set(fileList[0], "raw", files[0]);
      this.$set(fileList[0], "name", files[0].name);
      this.$refs["rebateUpload"].clearFiles(); // 清除文件
      this.$refs["rebateUpload"].handleStart(files[0]); // 选择文件后的赋值方法
    },
    }
  }
</script>
   
<style lang="scss"  scoped>
/deep/ .el-upload__input {
  display: none;
}
/deep/.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .show_img {
    width: 100px;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-items: center;
  }
</style>  

带有校验功能的：beforeUpload方法

<template>
  <div>
    <el-upload
                accept="image/png,image/gif,image/jpg,image/jpeg"
                ref="rebateUpload"
                class="avatar-uploader"
                :limit="1"
                :before-upload="beforeUpload"
                :file-list="fileList"
                :on-change="getLocalImg"
                :on-exceed="uploadExceed"
                :show-file-list="false"
                action="#"
              >
                <div class="show_img" v-if="isHidden">
                  <i
                    class="el-icon-plus"
                    style="color: #d9d9d9; margin-top: 15px"
                  ></i>
                  <p style="font-size: 14px; color: #d9d9d9">上传照片</p>
                </div>
                <img
                  class="show_img"
                  v-if="!isHidden"
                  :src="path"
                  width="100%"
                  height="100%"
                />
              </el-upload>
  </div>
  
</template>

<script>
  export default {
    data () {
      return {
        fileList: [],
        file:'',//传递给后端的文件
        isHidden:true,
        path:'',
        showPhoto:false
      }
    },
    methods: {
      // 获取上传图片的本地url，用于上传前的本地预览
      getLocalImg(event, fileList) {
      if(this.showPhoto){
       let url = "";
      if (window.createObjectURL !== undefined) {
        url = window.createObjectURL(event.raw);
      } else if (window.URL !== undefined) {
        url = window.URL.createObjectURL(event.raw);
      } else if (window.webkitURL !== undefined) {
        url = window.webkitURL.createObjectURL(event.raw);
      }
      this.path = url;
      this.isHidden = false;
      //强制刷新，嵌套太深
      this.$forceUpdate();
      this.showPhoto=false
      }
    },
   // 对文件的校验，主要使用一个变量不让其显示出来照片
    beforeUpload(file) {
        const isLtSize = file.size / 1024 /1024<1
       if (!isLtSize) {
        this.showPhoto=false
        this.$message.warning(`上传图片大小不能超过1MB!`)
      }else{
      this.showPhoto=true
      this.file=file
      }
    },
    uploadExceed(files, fileList) {
      this.$set(fileList[0], "raw", files[0]);
      this.$set(fileList[0], "name", files[0].name);
      this.$refs["rebateUpload"].clearFiles(); // 清除文件
      this.$refs["rebateUpload"].handleStart(files[0]); // 选择文件后的赋值方法
    },
    }
  }
</script>
   
<style lang="scss"  scoped>
/deep/ .el-upload__input {
  display: none;
}
/deep/.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .show_img {
    width: 100px;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-items: center;
  }
</style>  

补充：图片上传通过formData上传，下面代码，formData作为参数传到后端

 let formData = new FormData();
 formData.append("file", this.file);