el-upload上传图片居中显示不变形

花世界hua

于 2024-03-26 17:40:56 发布

阅读量177

点赞数 2

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_43778272/article/details/137052880

版权

文章讲述了在前端开发中，如何使用ElementUI的上传组件进行图片上传，包括文件类型检查（仅限JPEG）、大小限制（不超过2MB）以及使用FileReader将文件转换为base64格式的过程。

摘要由CSDN通过智能技术生成

             <div style="border:1px solid #dcdfe6;width:220px;height:160px;display: flex;justify-content: center; align-items: center;">
                  <span v-if="imageUrl" class="avatar"  style="display:block;width:210px;height:150px; ">
                       <img :src="imageUrl" style="width: 100%;height: 100%; object-fit: scale-down;">
                  </span>
              </div>
              <el-upload action="" :before-upload="beforeSealUpload" :http-request="uploadSealImg" style="position: absolute;top:0;width: 300px;left:225px">
                <span style="font-size: 14px;color: #4A90E2;cursor: pointer;">上传图片</span>
              </el-upload>

 uploadSealImg(param){
      // let formData=new FormData();
      // formData.append('file',param.file);
      let that = this;
      let file = param.file;
      that.imageUrl = URL.createObjectURL(file);
      var reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onloadend = function(){
        // 将文件（file）转换成base64字符串
         that.imageBase64 = reader.result;
      }

    },

 beforeSealUpload(rawFile) {
     // const isPNG = file.type === 'image/png';
      // const isLt1M = file.size / 1024 / 1024 < 1;
      // if (!isPNG) {
      //   this.$message.error('上传图片只能是 PNG 格式!');
      // }
      // if (!isLt1M) {
      //   this.$message.error('上传图片大小不能超过1Mb!');
      // }
      // return isPNG && isLt1M;
      
      if (rawFile.type !== "image/jpeg") {
        this.$msgbox.alert("请上传JPEG格式的图片文件!");
        return false;
      } else if (rawFile.size / 1024 / 1024 > 2) {
        this.$msgbox.alert("封面图片的大小请小于2MB!");
        return false;
      }
      return true;
      
 },