el-upload 图片转base4

 

    /**
     * 将上传的图片文件转为base64格式
     * @param {file} file 
     */
    Vue.prototype._getBase64 = function (file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader()
        let imgResult = ''
        reader.readAsDataURL(file)
        reader.onload = () => {
          imgResult = reader.result
        }
        reader.onerror = error => reject(error)
        reader.onloadend = () => resolve(imgResult)
      })
    }

 

<el-form-item label="图标" prop="imageUrl">
                  <el-upload
                    class="avatar-uploader"
                    action="#"
                    :auto-upload="false"
                    :show-file-list="false"
                    :on-change="getAvatar"
                  >
                    <img
                      v-if="floatSettingRuleForm.imageUrl"
                      :src="computedImgUrl"
                      class="avatar"
                    />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    <div slot="tip" class="el-upload__tip">
                      <p>支持扩展名：jpg/jpeg/png</p>
                      <p>建议图片大小：192*192</p>
                    </div>
                  </el-upload>
                </el-form-item>

 

 async getAvatar(file) {
      let suffix = file.name.substring(file.name.lastIndexOf(".") + 1); //获取文件后缀名
      // accept=".jpg,.jpeg,.png"
      if (!["jpg", "png", "jpeg"].includes(suffix))
        return this.$message.error("请上传jpg/jpeg/png后缀名图片");
      const [error, res] = await this.errorCaptured(this._getBase64, file.raw);
      if (error) return;
      const params = { type: "1", img: res };
      this._floatUpload(params);
    },

 

 

    // 上传图片接口
    async _floatUpload(params) {
      const [error, res] = await this.errorCaptured(
        this.$api.floatUpload,
        params
      );
      if (error) return;
      // 拿到后台返回的图片相对地址，然后发出请求图片链接的请求
      const imgUrl = res.data;
      this.floatSettingRuleForm.imageUrl = imgUrl;
    },

 

 computed: {
    computedImgUrl() {
      // return window.location.origin + this.floatSettingRuleForm.imageUrl;

      return (
        window.location.origin +
        "/social-share-manager/float_setting/getImg?token=" +
        this.floatSettingRuleForm.imageUrl

       
      );
    },
  },


/data里面数据/
floatSettingRuleForm: {
        id: "",
        cityCode: "",
        cityName: "",
        imageUrl: "", //imageUrl
        appName: "",
        androidPackageName: "",
        iosLinkUrl: "",
        iosSchema: "",
      },

 

    .avatar-uploader {
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    /deep/.el-upload--text {
      border: 1px dashed #d9d9d9;
      width: 192px;
      height: 192px;
    }
    /deep/ .el-upload--text:hover {
      border-color: #409eff;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 192px;
      height: 192px;
      line-height: 192px;
      text-align: center;
    }
    .avatar {
      width: 192px;
      height: 192px;
      display: block;
    }
    .el-upload__tip {
      p {
        font-size: 12px;
        line-height: 24px;
      }
    }