# 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>