element 七牛云 上传

vue+element-ui+qiniu 图片上传

效果如图:

代码片段如下:

    <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>