# ImgUpload:单图片上传

适用范围:上传单张图片

# 属性

属性名称 数据类型 说明
uploadApi String 图片上传接口。返回数据格式必须符合:{imgUrl:'',imgId:123,success:true}
width String 弹窗宽度,默认为'500px'
imgWidth Number 图片预览区图片宽度,默认为300
imgHeight Number 图片预览区图片高度,默认为300
quality Number 实际生成的图片大小系数输出,宽度=imgWidth乘quality,输出高度=imgHeight乘quality
autoSize Boolean 是否不强制改变图片宽高比例,默认为false

# 方法

方法 说明
show 弹出图片上传窗口。例:this.$refs.imgUpload.show();

# 事件

名称 参数说明 备注
on-upload(imgUrl,imgId) imgUrl:图片地址,imgId:图片ID 图片上传成功后触发
on-close 用户直接关闭界面时触发

# Demo1

<template>
  <div class="main-upload-picture">
    <ul>
      <li class="upload-item-btn" @click.stop="show">
        <img :src="src" v-if="src"/>
      </li>
    </ul>

    <img-upload ref="imgUpload" v-on:on-upload="onUpload"

                :ossTokenUrl="ossTokenUrl"
                :ossWebPath="ossWebPath"
                :ossDir="ossDir"
    ></img-upload>
  </div>
</template>

<script>
  import ImgUpload from "sjfx/pc/imgUpload";
  import Config from '@/config';

  export default {
    name: "logoEdit",
    components: {ImgUpload},
    props: {
      src: {
        type: String,
        default: ''
      },
      ossDir:{
        type: String,
        default: ''
      }
    },
    data() {
      return {
        ossTokenUrl: Config.ossTokenUrl,
        ossWebPath: Config.ossWebPath
      }
    },
    methods: {
      show() {
        this.$refs.imgUpload.show(this.src);
      },
      onUpload(imgUrl) {
        this.src = imgUrl;
        this.$emit('upload',imgUrl);
      }
    }
  }
</script>

# DEMO2

<img-upload
  ref="imgUpload"
  v-on:on-upload="insertImg"
  :uploadApi="uploadApi"
></img-upload>
<script>
	import {ImgUpload} from 'sjfx/pc';
</script>
Last Updated: 1/14/2020, 12:00:52 PM