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);
    },