封装一个upload组件上传图片可预览

`<template>
  <div style="display: flex;">
    <Poptip trigger="hover" title="图片预览" placement="right" width="350">
      <Input
        v-model="currentValue"
        @on-change="handleChange"
        :placeholder="placeholder"
        :size="size"
        :disabled="disabled"
        :readonly="readonly"
        :maxlength="maxlength"
        clearable
      />
      <div slot="content">
        <img :src="currentValue" alt="无效的图片链接" style="width: 100%;margin: 0 auto;display: block;" v-if="currentValue">
        <p v-else style="text-align: center">暂无图片</p>
        <a @click="viewImage=true" style="margin-top:5px;text-align:right;display:block" v-show="currentValue">查看大图</a>
      </div>
    </Poptip>
    <Upload
      :action="uploadFileUrl"
      :headers="accessToken"
      :on-success="handleSuccess"
      :on-error="handleError"
      :format="['jpg','jpeg','png','gif','bmp','mp4']"
      accept=".jpg, .jpeg, .png, .gif, .bmp, .mp4"
      :max-size="10240"
      :on-format-error="handleFormatError"
      :on-exceeded-size="handleMaxSize"
      :before-upload="beforeUpload"
      :show-upload-list="false"
      ref="up"
      class="upload"
    >
      <Button :loading="loading" :size="size" :disabled="disabled" :icon="icon">上传图片</Button>
    </Upload>

    <Modal title="图片预览" v-model="viewImage" :styles="{top: '30px'}" draggable>
      <img :src="currentValue" alt="无效的图片链接" style="width: 100%;margin: 0 auto;display: block;">
      <div slot="footer">
        <!-- <Button @click="viewImage=false">关闭</Button> -->
      </div>
    </Modal>
  </div>
</template>

<script>
// import { uploadFile } from "@/api/index";
 export default {
  name: "uploadPicInput",
  props: {
    value: String,
    size: String,
    placeholder: {
      type: String,
      default: "可输入图片链接"
    },
    disabled: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    },
    maxlength: Number,
    icon: {
      type: String,
      default: "ios-cloud-upload-outline"
    }
  },
  data() {
    return {
      accessToken: {},
      currentValue: this.value,
      loading: false,
      viewImage: false,
      uploadFileUrl: '/api/file/upload/common'
    };
  },
  methods: {
    init() {
      this.accessToken = {
        accessToken: this.getStore("accessToken")
      };
    },
    handleFormatError(file) {
      this.loading = false;
      this.$Notice.warning({
        title: "不支持的文件格式",
        desc:
          "所选文件‘ " +
          file.name +
          " ’格式不正确, 请选择 .jpg .jpeg .png .gif .bmp .mp4格式文件"
      });
    },
    handleMaxSize(file) {
      this.loading = false;
      this.$Notice.warning({
        title: "文件大小过大",
        desc: "所选文件‘ " + file.name + " ’大小过大, 不得超过 5M."
      });
    },
    beforeUpload() {
      this.loading = true;
      return true;
    },
    handleSuccess(res, file) {
      this.loading = false;
      if (res.success) {
        file.url = res.result.url;
        this.currentValue = res.result.url
        this.$emit("input",  res.result);
        this.$emit("on-change", res.result);
      } else {
        this.$Message.error(res.message);
      }
    },
    handleError(error, file, fileList) {
      this.loading = false;
      this.$Message.error(error.toString());
    },
    handleChange(v) {
      this.$emit("input", this.currentValue);
      this.$emit("on-change", this.currentValue);
    },
    setCurrentValue(value) {
      if (value === this.currentValue) {
        return;
      }
      this.currentValue = value;
      this.$emit("on-change", this.currentValue);
    }
  },
  watch: {
    value(val) {
      console.log(val,'sw')
      let vals = ''
      if(typeof(val)=='string'){
        vals = val
      }else if(typeof(val)=='object'){
        vals = val.url
      }
      this.setCurrentValue(vals);
    }
  },
  created() {
    this.init();
  }
};
</script>

<style lang="less">
.upload {
  display: inline-block;
  margin-left: 10px;
}
</style>`