选择图片转base64格式组件简单封装-Base64ImageInpu

选择图片转base64格式组件简单封装-Base64ImageInpu

vue+ts中使用。

<!-- Base64ImageInput-base64格式的图片上传输入框,这里并不会真的将图片上传，只是将图片转为base64格式显示在输入框中并且让其可以预览 -->
<template>
  <div>
    <a-input class="w-full"
             v-bind="$attrs"
             v-on="$listeners"
             @click="onClick"
             v-model="state.inputVal"
             readOnly>
      <a-tooltip slot="suffix"
                 v-if="base64Img">
        <div slot="title">
          <img :src="base64Img"
               class="w-14 h-14 my-4"
               v-if="base64Img!=''">
        </div>
        <a-icon type="info-circle"
                style="color: rgba(0,0,0,.45)" />
      </a-tooltip>
    </a-input>

    <input type="file"
           hidden="hidden"
           ref="uploadButton"
           :accept="acceptString"
           @change="uploadImage()">
  </div>
</template>

<script lang="ts">
import {
 Component, Emit, Model, Watch, Prop, Vue
} from 'vue-property-decorator';

@Component({
  name: 'GBase64ImageInput',
  components: {
  },
})
export default class GBase64ImageInput extends Vue{
  @Model("change", {
  default: () => ([]),
  }) value!: any;

  /**
   * 文件类型（可以是字符串或者数组）
   * 示例：
   *   accept="image/png"
   *   accept="image/*"
   *   accept="image/png,image/jpeg"
   *   :accept="['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg']"
   */
  @Prop({ type: [String, Array], default: () => ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg'] })
  accept!: string | string[];

  get acceptString() {
    if (Array.isArray(this.accept)) {
      // 如果传的是 ['png','jpg'] 就转成 "image/png,image/jpeg"
      return this.accept.map((ext) => {
        if (ext.startsWith('image/')) return ext;
        return `image/${ext}`;
      }).join(',');
    }
    return this.accept;
  }

  base64Img = '';

  state = {
    inputVal: '',
  }

  onClick() {
    (this.$refs.uploadButton as any).click();
  }

  uploadImage() {
    const file = (this.$refs.uploadButton as any).files[0];
    const reader = new FileReader();

    let rawImg;
    reader.onloadend = () => {
      rawImg = reader.result;
      this.base64Img = rawImg;
      this.$set(this.state, 'inputVal', rawImg);
      this.emitChange();
    };
    reader.readAsDataURL(file);
  }

  @Watch('value')
  onValueChange(val: any) {
    this.base64Img = val;
    this.$set(this.state, 'inputVal', val);
  }

  @Emit("change")
  emitChange() {
    return this.base64Img;
  }

  mounted() {
    if (_.size(this.value) > 0) {
      this.base64Img = this.value;
      this.$set(this.state, 'inputVal', this.value);
    }
  }
}
</script>

<style lang="less" scoped>
</style>

使用：

<template slot="thumbnail"
          slot-scope="text, record">
    <GBase64ImageInput v-model="modalState.record.thumbnail" />
</template>