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

时间：2021-07-19 14:39:58 阅读：23 评论：0 收藏：0 [点我收藏+]

使用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,
　　　　imgwidth:‘‘

　　}
},

//上传图片
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‘

　}

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

原文：https://www.cnblogs.com/zhd09/p/15029262.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)