element 七牛云上传

柔光的暖阳◎ 2022-02-03 12:19 979阅读 0赞

vue+element-ui+qiniu 图片上传

效果如图:

![图片上传前][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pha2V0NTIxOTk5OQ_size_16_color_FFFFFF_t_70]

代码片段如下:

<el-form
          :model="TeacherAddForm"
          :rules="rules"
          ref="TeacherAddForm"
          label-width="100px"
          class="demo-TeacherAddForm"
        >
          <el-form-item label="头像" prop="logo_url" required>
            <el-upload
              class="avatar-uploader"
              accept="image/jpeg,image/gif,image/png,image/bmp"
              action="http://upload.qiniup.com/"
              :show-file-list="false"
              :data="uploadData"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <div
                v-if="!TeacherAddForm.logo_url"
                slot="tip"
                class="el-upload__tip"
              >
                上传jpg/png文件，且不超过5M
              </div>
              <img
                v-if="TeacherAddForm.logo_url"
                :src="TeacherAddForm.logo_url"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
    
    ...
    
      data() {
        return {
          uploadData: { token: "" },
          imgHost: "",
          TeacherAddForm: {
            logo_url: ""
          }      
        };
      },
      mounted() {
        http.get("/public/qiniu/upload/token?bucket=imgs").then(res => {
          this.uploadData.token = res.token;
          this.imgHost = res.img_host;  // 在七牛云自定义的图片下载域名
        });
      },
      methods: {
        handleAvatarSuccess(res, file) {
          // res: {"key":"FjBCDRqa-yvLYDNYElaa9ENaWc4X", "hash": "xxx"}
          this.TeacherAddForm.logo_url = this.imgHost + res.key;
        },
        beforeAvatarUpload(file) {
          const isJpgPng = file.type === "image/jpeg" || file.type === "image/png";
          const isLt5M = file.size / 1024 / 1024 < 5;
          if (!isJpgPng) {
            this.$message.error("上传头像图片只能是 JPG/PNG 格式!");
          }
          if (!isLt5M) {
            this.$message.error("上传头像图片大小不能超过 5MB!");
          }
          return isJpgPng && isLt5M;
        }
      }
    
    ... 
    
    <style lang="scss" scoped>
    .avatar-uploader /deep/ .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader /deep/ .el-upload:hover {
      border-color: #409eff;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pha2V0NTIxOTk5OQ_size_16_color_FFFFFF_t_70]: /images/20220203/67c9427a338d442e9fcfa35dcd64be7a.png