vue-前端直传阿里云

 


          <el-row class="imgrow">
            <el-col :span="6">法人身份证照片</el-col>
            <el-col :span="18">
              <el-col :span="18" v-if="setForm.idcardFront.length>0">
              <el-col
                v-for="(item,index) in setForm.idcardFront"
                :key="index"
                class="imgrow-col"
              >
                <img v-if="item.indexOf('jpg')>0" :src="item" class="avatar" />
                <span v-else>{{item}}</span>
              </el-col>
            </el-col>
            </el-col>
          </el-row>
 

          <el-button size="mini" type="primary">法人身份证照</el-button>
          <el-tag type="warning" size="mini" style="margin-left:10px;">只能上传jpg格式图片和zip个格式压缩包</el-tag>
          <el-row class="table-row">
            <el-col :span="4">
              <el-upload
                class="avatar-uploader"
                drag
                :limit="9"
                :http-request="Upload1"
                :file-list="fileList1"
                :on-exceed="handleExceed1"
                :before-upload="beforeAvatarUpload1"
                :on-change="handleChange1"
                :on-remove="handleRemove1"
                action
              >
              <el-row v-if="setForm.idcardFront.length>0">
                  <el-col v-for="(item,index) in setForm.idcardFront" :key="index">
                    <img v-if="item.indexOf('jpg')>0" :src="item" class="avatar" />
                    <span v-else>{{item}}</span>
                  </el-col>
                </el-row>
               <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <el-progress
                v-if="videoFlag1"
                :percentage="videoUploadPercent1"
                style="margin-top:30px;"
              ></el-progress>
            </el-col>
          </el-row>
 


 
    return {
      rules,
      fileListbus:[],
      fileList1: [], //文件容器
      videoFlagbus: false, //进度条
      videoFlag1: false, //进度条
      videoUploadPercentbus: 0,
      videoUploadPercent1: 0,
      action: 1,
      phone: "",
      setForm: {
        idcard: "",
        idcardFront: [],//
      }
    };

 //上传身份证正面
    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);
    },