elementUI el-upload 根据上传的图片高度,进行自适应宽度
<el-upload id="upload1"
action=""
list-type="picture-card"
:before-upload="handledBeforeUpload"
:on-preview="handlePictureCardPreview"
:on-success="handleSuccess"
:on-remove="handleRemove">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
2.js
methods:{
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
handleSuccess(response, file, fileList){
console.log("上传文件满足条件,成功了");
// console.log(response, file, fileList);
},
handledBeforeUpload(file){//重点
let isImg = true;
const isSize = new Promise((resolve,reject)=>{
let img = new Image();
img.onload = function(){
resolve(img);
}
img.src = URL.createObjectURL(file)
}).then((res)=>{
let uploadId = document.getElementById("upload1");
let liDom = uploadId.querySelector(".el-upload-list--picture-card").firstChild;
let div = uploadId.querySelector(".el-upload--picture-card");
let scale = 150 / res.height ;
let width = res.width * scale;
liDom.style.width = width + 'px';
return file;
},(err)=>{
return Promise.reject();
})
return isImg && isSize;
},
}

浙公网安备 33010602011771号