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;
},
}