el-upload上传/预览时dialog宽自适应

使用element插件中的el-upload上传一张图片

el-dialog预览时它的宽度需要根据图片的宽度而变化

<el-upload 
　　ref="upload" 
　　action="" 
　　:http-request="uploadImages" 
　　:on-remove="handleRemove" 
　　:on-preview="handlePreview" 
　　:limit="1" 
　　:on-exceed="handleExceed" 
　　:file-list="apiUrl" 
　　list-type="picture"
>
 　　<el-button size="small" type="primary" >点击上传</el-button>
</el-upload>
<el-dialog title="图片预览" :visible.sync="previewVisible" :width="imgwidth">
   <img :src="previewPath" @load="onimgLoad" />
</el-dialog>
//script
data(){
　　return{
　　　　apiurl:[],//上传的文件列表
　　　　previewVisible:false,
　　　　img''

　　}
},

//上传图片
async uploadImages(val) {

      const formData = new FormData()

      formData.append('file', val.file)

      const {data: res} = await this.$http.uploadfiles(formData)//uploadfiles已被封装

　　　　//uploadfiles(params) {

    　　　　//return axios.post('https://xxxx',

　　　　　　// params, 

　　　　　　//{headers: {'Authorization': window.sessionStorage.getItem('sessionKey')}})

  　　　//},

      this.apiUrl = res.apiUrl

　},

　//移除图片

　handleRemove（）{}

　//点击列表中已上传的图片事件

　handlePreview（）{

　　this.previewPath = this.apiUrl

    this.previewVisible = true

　}

　//超出个数限制时事件

　handleExceed(files, fileList) {

    this.$message.warning('图标上传数量只允许1张')

  },

　//弹窗宽度事件

　onimgLoad(e) {

    const img = e.target//获取dom元素

    let width = 0

    if (img.fileSize > 0 || (img.width > 1 && img.height > 1)) {

      width = img.width + 40

    }

    this.imgwidth = width + 'px'

　}