美文网首页
element-ui多图上传到oss

element-ui多图上传到oss

作者: w_小伍 | 来源:发表于2020-06-22 11:46 被阅读0次
    <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>
    

    相关文章

      网友评论

          本文标题:element-ui多图上传到oss

          本文链接:https://www.haomeiwen.com/subject/mgrxfktx.html