Vue 上传OSS多图片组件上传

<template>
  <div class="about-copyright">
    <div class="about-title">{{ title }}</div>
    <div class="about-content">
      <p>请详细说明您的问题和意见（必填)</p>
      <div class="textContent">
        <textarea
          rows="5"
          cols="100"
          class="textarea"
          placeholder="请输入您的问题和意见，不超过200个字"
          maxlength="200"
          v-model="textarea"
        ></textarea>
        <i>{{textarea.length}}/200</i>
      </div>
      <p class="question">上传相关问题截图或图片(最多6张)</p>
      <!-- 上传图片 -->
      <el-upload
        ref='upload'
        :action="uploadFile.action"
        list-type="picture-card"
        :limit="6"
        :on-preview="handlePictureCardPreview"
        :before-upload="beforeAvatarUpload"
        :on-success="handleAvatarSuccess"
        :data="uploadFile.data"
      >
        <i class="el-icon-plus" style="margin-top:10px;">
          <br/>
          <i style="font-size:12px;">支持jpg、jpeg、png、bmp格式，不要超过5M</i>
        </i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible" size="tiny">
        <img width="100%" :src="dialogImageUrl" alt>
      </el-dialog>
      <div class="content-footer">
        <button class="button" @click="onSelectImage">提交</button>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  name: "about-copyright",
  components: {},
  data() {
    return {
      title: "意见反馈",
      textarea: "",
      dialogImageUrl: "",
      dialogVisible: false,
      activeNames: 0,
      noteList: [],
      uploadFile: {
        action: "", //上传的路径
        options: {}, //签名的返回值
        url: "" //上传之后生成的url
      },
      editImageUrl: "",
      fileList: [],
      imagesString:[],
      SSOTOKEN:this.$factory.getcookiesInClient('token'), 
    };
  },
  methods: {
    onSelectImage() {
      const options = {
        token:this.SSOTOKEN,
        clientType: 'pc',
        context: this.textarea,
        images: this.imagesString,
        distinguishability: '1024*768',
        equipmentVersion: navigator.userAgent
      };
      this.$dialogBox({
                title:"提示",
                msg:"提交成功，感谢您对行家的支持", 
                left_butnName:"确定",
                right_butnName:"取消",
                checkBtn:false,
                callback: () => {
                   this.$fetch("getAboutAgreenBack", options).then(res => {
                      console.log(res, '输出回到数据');
                      this.$Message.success("提交成功!");
                      this.textarea = "";
                      this.$refs.upload.clearFiles();
                    });
                },
            })
      
    },
    handleAvatarSuccess(response, file, fileList) {
      console.log("成功的回调", fileList);
      this.fileList = fileList;
      this.imagesString = this.fileList.map(item => {
        return item.url
      })
      this.imagesString = this.imagesString.join();
      console.log(this.imagesString, '获取图片的数组')
      this.editImageUrl = this.uploadFile.url;
    },
    async beforeAvatarUpload(file) {
      console.log("执行回调");
      const typeList = ["image/jpeg","image/png", "image/bmp" , "image/jpg"] 
      const isJPG =typeList.includes(file.type)
      const isLt2M = file.size / 1024 / 1024 < 5;

      if (!isJPG) {
        this.$Message.error("上传头像图片只能是 JPG/JPEG/PNG/BMP 格式!");
      }
      if (!isLt2M) {
        this.$Message.error("上传头像图片大小不能超过 5MB!");
      }
      if (isJPG && isLt2M) {
        // console.log('s',file)
        const res = await this.fsSignature(file);
        let data = res.data;
        this.uploadFile.options = { ...data };
        this.uploadFile.action = data.host;
        this.uploadFile.data = {
          name: this.uploadFile.options.url.split("/").slice(-1),
          key:
            this.uploadFile.options.dir +
            this.uploadFile.options.url.split("/").slice(-1),
          policy: this.uploadFile.options.policy,
          OSSAccessKeyId: this.uploadFile.options.accessid,
          success_action_status: "200",
          callback: this.uploadFile.options.callback,
          signature: this.uploadFile.options.signature
        };
        this.uploadFile.url = this.uploadFile.options.url;
        this.uploadFile = Object.assign({}, this.uploadFile);
        console.log("1", this.uploadFile);
        return true;
      } else {
        return false;
      }
    },
    fsSignature(file) {
      let userInfo = JSON.parse(localStorage.getItem("userInfo"));
      let test = file.name.split(".");
      let key =
        userInfo.uid + "-" + test[0] + "-" + file.lastModified + "." + test[1];
      return this.$axios({
        url: "https://hq-storage.hqjy.com/api/signMapLog/expert",
        method: "post",
        header: {
          Accept: "application/json, text/plain, */*",
          "Content-Type": "application/json;charset=UTF-8",
          userToken: this.$factory.getcookiesInClient("token")
        },
        data: {
          dir: "hangjiaPC-notice/image",
          key
        }
      });
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  }
};
</script>

<style lang="scss" scoped>
@import "../../assets/css/varibale";
.about-copyright {
  width: 100%;
  .about-content /deep/ {
    width: 100%;
    .question {
      margin-bottom: 10px;
    }
    .textContent {
      position: relative;
      .textarea {
        border: 1px solid #ccc;
        padding: 10px;
        margin: 10px 0;
      }
      .textarea:hover {
        border: 1px solid #FC3F4C;
      }
      i {
        position: absolute;
        right: 88px;
        bottom: 20px;
      }
    }

    img {
      max-width: 100%;
    }
    button {
      display: inline-block;
      line-height: 1;
      white-space: nowrap;
      cursor: pointer;
      background: #409eff;
      border: 1px solid #dcdfe6;
      color: #fff;
      -webkit-appearance: none;
      text-align: center;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      outline: 0;
      margin: 0;
      -webkit-transition: 0.1s;
      -o-transition: 0.1s;
      transition: 0.1s;
      font-weight: 500;
      padding: 12px 20px;
      font-size: 14px;
      border-radius: 4px;
    }
    .content-footer {
      display: flex;
      justify-content: center;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 108px;
      height: 108px;
      //   line-height: 108px;
      line-height: 1.42;
      font-size: 12px;
      color: #6b7580;
      display: inline-block;
      text-align: center;
      background-color: #f5f7fa;
      .uploader-icon {
        margin-top: 10px;
        font-size: 22px;
      }
    }
  }
}
</style>