vue-前端直传阿里云

 //上传身份证正面
    Upload1(file) {
      var _that = this;
      this.videoFlag1 = true;
      const OSS = require("ali-oss");
      let _self = this;
      var bucket; //OSS文件名称
      var region;
      var extranet;
      var accessKeyId;
      var accessKeySecret;
      // 存储路径，并且给图片改成唯一名字

      this.$axios({
        method: "post",
        url: this.$store.state.domain + "/sld/getAliyunOss"
      }).then(
        response => {
          // 向后台发请求 拉取OSS相关配置
          //后端提供数据
          const client = new OSS({
            region: "oss-cn-shenzhen", // 服务器集群地区
            extranet: response.data.extranet,
            accessKeyId: response.data.secretId, // OSS帐号
            accessKeySecret: response.data.secretKey, // OSS 密码
            bucket: response.data.bucket // 阿里云上存储的 Bucket
          });

          // this.receivables.push(fileName);
          var fileName = file.file.name;
          //时间戳
          const obj = this.timestamp();
          //时间戳
          const obj2 = this.timestamp1();
          //后缀名
          const suffix = fileName.substr(fileName.indexOf("."));

          //获取企业编号
          // const enterpriseNo = sessionStorage.getItem("enterpriseNo");
          const storeAs =
            "test/sld/userinfo/" +
            this.phone +
            "/" +
            obj +
            "-" +
            obj2 +
            "-" +
            fileName;
          //上传
          client
            .multipartUpload(storeAs, file.file, {
              progress: function(p) {
                //获取进度条的值
                _that.videoUploadPercent1 = p * 100;
              }
            })
            .then(res => {
              if (res.url != null || res.url != "") {
                //返回服务器文件url
                // this.videoFlag1 = false;
                _that.videoUploadPercent1 = 100;
                this.setForm.idcardFront.push(
                  "http://slloan.oss-cn-shenzhen.aliyuncs.com/" + storeAs
                  );
                this.$notify({
                  title: "上传结果",
                  type: "success",
                  offset: 100,
                  dangerouslyUseHTMLString: true,
                  message:
                    "<strong>" + file.file.name + "文件上传成功！</strong>",
                  position: "bottom-left"
                });
              }
            })
            .catch(err => {
              this.$message.error("上传文件异常:" + err);
            });
          //失败
        },
        //打印
        response => {}
      );
    },
    handleRemove1(file, fileList) {
      var arr = [];
      arr = this.setForm.idcardFront.filter(data => {
        return data.indexOf(file.name) < 0;
      });
      if (arr.length == 0) {
        this.videoFlag1 = false;
      }
      this.setForm.idcardFront = arr;

    },
    handleExceed1(files, fileList1) {
      this.$message.warning(
        `当前限制选择 9 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList1.length} 个文件`
      );
    },
    beforeAvatarUpload1(file) {
      const length = this.fileList1.length <= 9;
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!length) {
        this.$message.error("此项上传文件数量不得大于8份，上传第9份文件失败！");
      }
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return length && isLt2M && isJPG;
    },
    handleChange1(file, fileList) {
      this.fileList1 = fileList.slice(-3);
    },