lilishop-ui/seller/src/views/my-components/lili/upload-pic-input.vue

<template>
  <div>
    <div style="display:flex;">
      <Input
        v-model="currentValue"
        @on-change="handleChange"
        v-show="showInput"
        :placeholder="placeholder"
        :size="size"
        :disabled="disabled"
        :readonly="readonly"
        :maxlength="maxlength"
      >
        <Button slot="append" icon="md-eye"></Button>
      </Input>
      <Poptip transfer trigger="hover" title="图片预览" placement="right" width="350">
        <Icon type="md-eye" class="see-icon" />
        <div slot="content">
          <img :src="currentValue" alt="该资源不存在" style="width: 100%;margin: 0 auto;display: block;" />
          <a @click="viewImage=true" style="margin-top:5px;text-align:right;display:block">查看大图</a>
        </div>
      </Poptip>
      <Upload
        :action="uploadFileUrl"
        :headers="accessToken"
        :on-success="handleSuccess"
        :on-error="handleError"
        :format="['jpg','jpeg','png','gif','bmp']"
        accept=".jpg, .jpeg, .png, .gif, .bmp"
        :max-size="maxSize*1024"
        :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>
    </div>

    <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: { // input提示信息
      type: String,
      default: "图片链接"
    },
    showInput: { // 显示图片链接
      type: Boolean,
      default: true
    },
    disabled: { // 是否不可选中
      type: Boolean,
      default: false
    },
    readonly: { // 是否只读
      type: Boolean,
      default: false
    },
    maxSize: { // 图片最大尺寸
      type: Number,
      default: 5
    },
    maxlength: Number, // 最大长度
    icon: { // 上传按钮图标
      type: String,
      default: "ios-cloud-upload-outline"
    }
  },
  data() {
    return {
      accessToken: {}, // 验证token
      currentValue: this.value, // 当前值
      loading: false, // 加载状态
      viewImage: false, // 是否预览图片
      uploadFileUrl: uploadFile // 上传列表
    };
  },
  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格式文件"
      });
    },
    // 大小校验
    handleMaxSize(file) {
      this.loading = false;
      this.$Notice.warning({
        title: "文件大小过大",
        desc: "所选文件‘ " + file.name + " ’大小过大, 不得超过 " + this.maxSize + "M."
      });
    },
    // 上传前
    beforeUpload() {
      this.loading = true;
      return true;
    },
    // 上传成功
    handleSuccess(res, file) {
      this.loading = false;
      if (res.success) {
        this.currentValue = res.result;
        this.$emit("input", this.currentValue);
        this.$emit("on-change", this.currentValue);
      } 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);
      this.$attrs.rollback && this.$attrs.rollback()
    },
    // 初始值
    setCurrentValue(value) {
      if (value === this.currentValue) {
        return;
      }
      this.currentValue = value;
      this.$emit("on-change", this.currentValue);
    }
  },
  watch: {
    value(val) {
      this.setCurrentValue(val);
    }
  },
  created() {
    this.init();
  }
};
</script>

<style lang="scss" scoped>
.see-icon {
  font-size: 16px;
  margin-left: -32px;
  margin-top: 3px;
  padding: 7px;
  cursor: pointer;
}

.upload {
  display: inline-block;
  margin-left: 10px;
}
</style>