SOURCE

(function () {
      if (!window.uploadFileFun) {
        let globalJSON = {
          num: 0,
          tip: ""
        };
        function createTip(msg) {
          if(!globalJSON.tip){
            globalJSON.tip = document.createElement("div");
            globalJSON.tip.className = "upload-tip";
            document.body.appendChild(globalJSON.tip);
          }
          var tip = globalJSON.tip;
          tip.innerHTML = msg;
          globalJSON.tip.style.display = "block";
          setTimeout(function () {
            globalJSON.tip.style.display = "none";
          }, 2000);
        }
        // 上传文件
        function to_upload_file(file, options, progress) {
          if (file) {
            var url = options.url;
            var form = new FormData();
            form.append(options.fileName, file);
            form.append('name', options.fileName);
            var xhr = new XMLHttpRequest();
            xhr.upload.onprogress = progress;
            xhr.open("POST", url, true);
            xhr.send(form);
            return xhr;
          }
        }
        // 创建上传按钮
        function renderUploadDom(options) { 
          var alreadyNumber = 0;
          var uploadComponent = document.createElement("div");
          uploadComponent.className = "upload-component";
          var uploadBtn = document.createElement("div");
          uploadBtn.className = "upload-btn";
          // 文件列表
          var uploadFileList = document.createElement("div");
          uploadFileList.className = "upload-file-list";
          // 文件选择按钮
          var fileDom = document.createElement("input");
          fileDom.type = "file";
          fileDom.className = "file-dom";
          fileDom.name = options.fileName;
          var accept = (function(){
            var arr = [];
            Object.keys(options.type).forEach(function(key){
              if(!options.type[key] || options.type[key].indexOf('*') !== -1){
                arr.push(key + '/*');
              }else{
                options.type[key].split(',').forEach(function(item){
                  arr.push(key + '/' + item);
                });
              }
            });
            return arr;
          }());
          fileDom.accept = accept.join(',');
          fileDom.multiple = options.number > 1;
          
          fileDom.addEventListener("change", function (event) {
            var originalFileList = Array.from(event.target.files);
            if (originalFileList.length > options.number) {
              createTip("最多只能上传" + options.number + "个文件");
              return;
            }
            var tipArr = [];
            var passFileList = originalFileList.filter(function (file, index) {
              var mark = true;
              if(file.size > options.size){
                tipArr.push("文件" + (index + 1) + "大小不能超过" + options.size / 1024 / 1024 + "M");
                mark = false;
              }
              if(mark){
                var type = file.type.split('/');
                if(options.type[type[0]]){
                  mark = options.type[type[0]] === '*' || options.type[type[0]].indexOf(type[1]) !== -1;
                }else{
                  tipArr.push("文件" + (index + 1) + "格式不支持");
                  mark = false;
                }
              }
              return  mark;
            });
            
            if(tipArr.length){
              createTip(tipArr.join('<br>'));
            }
            alreadyNumber += passFileList.length;
            if(alreadyNumber == options.number){
              uploadBtn.style.display = "none";
            }
            passFileList.forEach(function (file) {
              var fileItem = document.createElement("div");
              fileItem.className = "file-item";
              var img = document.createElement("img");
              if(file.type.indexOf('image') !== -1){
                img.src = URL.createObjectURL(file);
              }else if(file.type.indexOf('video') !== -1){
                img.src = 'https://aimg8.dlssyht.cn/VUEAdmin/components/fileType/group_2/f-mp4.png'
              }else{
                img.src = 'https://aimg8.dlssyht.cn/VUEAdmin/components/fileType/group_2/f-unknow.png'
              }
              fileItem.appendChild(img);
              var xhr = null;
              var deleteBtn = document.createElement("i");
              deleteBtn.className = "delete-btn";
              deleteBtn.addEventListener("click", function () {
                xhr.abort();
                fileItem.remove();
                alreadyNumber--;
                uploadBtn.style.display = "flex";
              });
              fileItem.appendChild(deleteBtn);
              var loadingDom = document.createElement("span");
              loadingDom.className = "loading-dom";
              fileItem.appendChild(loadingDom);
              uploadFileList.appendChild(fileItem);
              xhr = to_upload_file(file, options, function(e){
                fileItem.querySelector(".loading-dom").innerHTML =  Math.round(e.loaded / e.total * 100)  + "%";
              });
              // 异步处理
              xhr.onreadystatechange = function(xsl) {
                if (this.readyState == 4 && this.status == 200) {
                  fileItem.querySelector(".loading-dom").remove();
                  if(options.success){
                    options.success(JSON.parse(this.responseText));
                  }
                }
              };
              xhr.onload = function(xsl){
                console.log(xsl);
              }
              // 添加 上传失败后的回调函数
              xhr.onerror = function(){
                fileItem.querySelector(".loading-dom").remove();
              }
            });
          });
          uploadBtn.appendChild(fileDom);

          uploadComponent.appendChild(uploadBtn);
          // fileItem.appendChild(loadingDom);
          // uploadFileList.appendChild(fileItem);
          uploadComponent.appendChild(uploadFileList);
          options.targetDom.appendChild(uploadComponent);
        }
        

        window.uploadFileFun = function (options) {
          if (!options || options && !options.targetDom) {
            console.log("请传入正确的DOM对象");
            return;
          }
          var option = {
            type: {image:'*', video:'*'},
            number: 1,
            size: 1024 * 1024 * 2, // 2M
            url: '',
            fileName: "file",
            success: function (res) {
              console.log("上传成功", res);
            },
            error: function (err) {
              console.log("上传失败", err);
            }
          };
          for (var key in options) {
            option[key] = options[key];
          }
          renderUploadDom(options);
        };
      }

    }());


    (function () {
      uploadFileFun({
        targetDom: document.querySelector("#avatarUpload"),
        type: {image:'jpg,png,jpeg', video:'*'},
        number: 2,
        size: 1024 * 1024 * 10, // 10M
        url: "/upload_file",
        fileName: "file",
        success: function (res) {
          console.log("上传成功", res);
        }
      });
    })();// 上传按钮点击事件

<div id="avatarUpload"></div>


<!-- 组件渲染结构 -->
  <!-- <div class="upload-component">
    <div class="upload-btn">
      <input type="file" class="file-dom" />
    </div>
    <div class="upload-file-list">
      <div class="file-item">
        <img src="https://51huilife.dlszyht.net.cn/xcx/oneCardXCX/static/home/avatar_1.png" />
        <i class="delete-btn"></i>
        <span class="loading-dom"></span>
      </div>
    </div>
  </div> -->

@keyframes loading {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    .upload-component {
      display: flex;
    }

    .upload-btn {
      display: inline-block;
      height: 60px;
      width: 60px;
      border: 1px solid #44A1F8;
      border-radius: 50%;
      position: relative;
      background-color: #fff;
      flex-shrink: 0;
    }

    .upload-btn::before,
    .upload-btn::after {
      content: "";
      position: absolute;
      background-color: #44A1F8;
      border-radius: 5px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .upload-btn::before {
      width: 50%;
      height: 4px;
    }

    .upload-btn::after {
      width: 4px;
      height: 50%;
    }

    .upload-btn .file-dom {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      cursor: pointer;
    }

    .upload-file-list {
      display: flex;
    }

    .upload-file-list .file-item {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 10px;
      position: relative;
      width: 60px;
      height: 60px;
      border: 1px solid #ccc;
      border-radius: 50%;
    }

    .upload-file-list .file-item img {
      max-width: 100%;
      max-height: 100%;
      border-radius: 50%;
    }

    .upload-file-list .file-item .delete-btn {
      position: absolute;
      z-index: 10;
      right: 0;
      top: 0;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background-color: #c00;
    }

    .upload-file-list .file-item .delete-btn::before,
    .upload-file-list .file-item .delete-btn::after {
      content: "";
      position: absolute;
      background-color: #fff;
      border-radius: 1px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(45deg);
    }

    .upload-file-list .file-item .delete-btn::before {
      width: 50%;
      height: 2px;
    }

    .upload-file-list .file-item .delete-btn::after {
      width: 2px;
      height: 50%;
    }

    .upload-file-list .file-item .loading-dom {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.3);
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      color:#fff;
    }

    .upload-file-list .file-item .loading-dom::after {
      content: "";
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border-width: 2px;
      border-style: solid;
      border-color: #999 #ccc #ccc;
      position: absolute;
      z-index: 2;
      top: 50%;
      left: 50%;
      margin: -17px 0 0 -17px;
      animation: loading .5s linear infinite;
    }
    .upload-tip{
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 9999;
      display: none;
      background-color: rgba(0, 0, 0, 0.6);
      color: #fff;
      padding: 10px;
      border-radius: 5px;
    }