element-ui多图上传到oss

2020-06-22  本文已影响0人  w_小伍
<div class="g-c-66 pro-pic inner-upload">
                <div class="img-box" v-for="(file,index) in addedPreviewFile" :key="index">
                  <el-upload
                    class="avatar-uploader"
                    action="#"
                    ref="uploader"
                    name="upfile"
                    :accept="accept"
                    :show-file-list="false"
                    :http-request="handleAvatarChange(index)"
                    :before-upload="beforeAvatarUpload(index)"
                  >
                    <div v-if="file.url">
                      <img :src="file.url" class="avatar" ref="proPic" id="pro-pic">
                      <span slot="trigger" class="g-c-eff changeBtn">更换</span>
                    </div>
                    <i v-else class="el-icon-plus avatar-uploader-icon">
                      <img src="../../../assets/img/pic.png" alt="" class="img-empty"><br>
                      <span>点击上传</span>
                    </i>
                  </el-upload>
                  <a class="g-c-eff deleteBtn" v-if="file.url" @click="deleteImg(index)">删除</a>
                </div>
                <div class="notic-box g-mt-10" v-show="showImgNotice" ref="quantity"><em
                  class="font_family icon-alert g-mr-5"></em>至少上传一张图片
                </div>
              </div>
addedPreviewFile: [{url: ''}, {url: ''}, {url: ''}, {url: ''}, {url: ''}],
 computed: {
accept() {
      return 'image/jpeg,image/jpg';
    },
  },
    beforeAvatarUpload(index) {
     return (file) => {
        if (!file) {
          return
        }
        let testmsg = file.name.substring(file.name.lastIndexOf(".") + 1).toLowerCase();
        const isLt1M = file.size / 1024 / 1024 < 1;
        if (testmsg !== 'jpg' && testmsg !== 'jpeg') {
          this.$message.error('上传图片只能是 JPG 格式!');
          this.addedPreviewFile[index].url = ''
          return false;
        }
        if (!isLt1M) {
          this.$message.error('上传图片不能超过1M!');
          this.addedPreviewFile[index].url = ''
          return false;
        }
      }
    },
    /*上传阿里云*/
    handleAvatarChange(index) {
     return (file) => {
        const form = new FormData()
        uploadImg().then(res => {
          form.append('policy', _get(res, 'data.policy'))
          form.append('OSSAccessKeyId', _get(res, 'data.accessid'))
          form.append('signature', _get(res, 'data.signature'))
          form.append('key', `${_get(res, 'data.dir')}${_get(res, 'data.key')}${'_'}${this.time}${'.jpg'}`)
          form.append('success_action_status', 200)
          form.append('file', file.file)
          this.$http.post(process.env.OSS_URL, form).then(result => {
            if (result.status == 200) {
              this.addedPreviewFile[index].url = URL.createObjectURL(file.file)
              let url = (process.env.OSS_URL + '/' + `${_get(res, 'data.dir')}${_get(res, 'data.key')}${'_'}${this.time}${'.jpg'}` + '?fr=upload')
              this.updateImg.push(url)
            } else {
              this.$message.error('上传失败!')
            }
          })
        }).catch(e => {
          console.log(e)
        })
      }
    },
    /*删除图片*/
    deleteImg(index) {
      this.addedPreviewFile[index].url = '';
      this.updateImg[index] = ""
    },
.inner-upload {
  margin-top: 10px;
  height: 172px;
  margin-left: 10px;
}
.inner-upload .el-icon-plus:before {
  content: "";
}

.inner-upload .avatar-uploader-icon {
  color: #888888;
  width: 140px;
  height: 140px;
  text-align: center;
  vertical-align: middle;
  display: table-cell;
  text-align: center;
  /*overflow: hidden;*/
  font-size: 12px;
}

.inner-upload .avatar {
  /* width: 140px;
   height: 140px;*/
  display: block;
  object-fit: scale-down;
}

.inner-upload #pro-pic {
  width: 136px;
  height: 136px;
  display: block;
  object-fit: scale-down;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
<style>
.inner-upload .el-upload {
  width: 140px;
  height: 140px;
  position: relative;
}
</style>
上一篇下一篇

猜你喜欢

热点阅读