使用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‘
}