上传图片

  • on-preview 点击文件列表中已上传的文件时的钩子(点击弹出框预览图片)
  • on-remove 清空已上传的文件列表
  • before-upload 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
  • on-change 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
  1.   <el-form-item label="上传图片" ref="uploadelRef"  prop="logo">
  2.       <el-upload
  3.               action=""
  4.               ref="uploadel"
  5.               list-type="picture-card"
  6.               :auto-upload="false"
  7.               :on-preview="handlePictureCardPreview"
  8.               :on-remove="handleRemove"
  9.               :limit='1'
  10.               :before-upload="beforeImgUpload"
  11.               :on-change="loadJsonFromFile"
  12.               :file-list="loadupload"
  13.       >
  14.           <img v-if="imageUrl" :src="imageUrl" class="avatar">
  15.           <i v-else class="el-icon-plus"></i>
  16.       </el-upload>
  17.   </el-form-item>
  18. <el-dialog title="图片预览" :modal="false" :visible.sync="dialogVisibleimg">
  19.    <img width="100%" :src="dialogImageUrl" alt="">
  20. </el-dialog>
  1.   <script>
  2.       export default {
  3.          data(){
  4.              return{
  5.                  loadupload: [],//文件列表
  6.              }
  7.          },
  8.          methods:{
  9.               //点击文件列表中已上传的文件时的  
  10.               handlePictureCardPreview(file) {
  11.                   this.formData.handlePic = file.url;
  12.                   this.dialogImageUrl = file.url;
  13.                   this.dialogVisibleimg = true;
  14.               },
  15.               //清空已上传的文件列表  
  16.               handleRemove(file, fileList) {
  17.                    //清空上传列表
  18.                    this.$refs.uploadel.clearFiles();
  19.                    this.loadupload = [];
  20.                },
  21.             //验证上传文件格式大小 为true时可直接走后端上传接口
  22.             beforeImgUpload(file) {
  23.                 let isTrue = "";
  24.                 let FileExt = file.name.replace(/.+\./, "");
  25.                 //验证图片格式
  26.                 if (["jpg", "jpeg", "bmp", "png", "gif", "mp4", "mkv", "avi"].indexOf(FileExt.toLowerCase()) === -1) {
  27.                     isTrue = false;
  28.                 } else {
  29.                     isTrue = true;
  30.                 }
  31.                 //验证图片大小
  32.                 const isLt2M = file.size / 1024 / 1024 < 2;
  34.                  if (isTrue == false) {
  35.                       this.$message({
  36.                         type: "warning",
  37.                         message:
  38.                           "请上传后缀名为jpg、jpeg、bmp、png、gif、mp4、mkv、avi的附件！",
  39.                       });
  40.                      return false;
  41.                  }
  42.                 if (!isLt2M) {
  43.                     this.$message.error('上传图片大小不能超过 2MB!');
  44.                     return false;
  45.                 }
  46.                 return true
  47.             },
  48.          },
  49.          //文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
  50.          loadJsonFromFile(file, fileList) {
  51.             if (file) {
  52.                 this.$nextTick(() => {
  53.                     //清除上传图片表单的prop校验规则
  54.                     this.$refs.uploadelRef.clearValidate()
  55.                 })
  56.             }
  57.             this.loadupload = fileList;
  58.          },
  59.         //提交表单时候的操作带文件file
  60.         submitForm(form){
  61.             this.$refs[form].validate((valid) => {
  62.                 if (valid) {
  63.                     //有上传图片和没上传图片的
  64.                     if (this.loadupload.length > 0) {
  65.                         const formData = new FormData();
  66.                         formData.append('file', this.loadupload[0].raw)
  67.                         //上传文件到后端
  68.                         uploadfiles(formData).then(res => {
  69.                             this.loadupload = [];
  70.                             // 返回的图片名称
  71.                             this.formData.handlePic = res.data.fileUrl
  72.                             //上传成功后走提交表单方法
  73.                         });
  74.                     } else {
  75.                         //提交表单方法
  76.                     }
  77.                 }
  78.             })
  79.         },
  80.      }
  81.  </script>

includes验证图片格式

  1.      let types = ['image/png','image/jpeg'];
  2.      const isJPG = types.includes(file.type);
  3.     if (!isJPG) {
  4.         this.$message({
  5.             type: 'error',
  6.             message: this.$t('请上传 png或 jpg 格式的图片')
  7.         })
  8.         return false;
  9.     }

验证图片高度

  1.  //验证图片宽高
  2.     valWidthAndHeight(file) {
  3.       const isSize = new Promise( (resolve, reject) => {
  4.         let width = 108;
  5.         let height = 108;
  6.         let _URL = window.URL || window.webkitURL;
  7.         let img = new Image();
  8.         img.onload = function () {
  9.           let valid = img.width <= width && img.height <= height;
  10.           valid ? resolve() : reject();
  11.         }
  12.         img.src = _URL.createObjectURL(file);
  13.       }).then(() => {
  14.         return true;
  15.       }, () => {
  16.         return false;
  17.       });
  18.       return isSize;
  19.     },
  20.     //使用方法
  21.     this.valWidthAndHeight(this.loadupload[0].raw).then(res => {
  22.         if(!res) {
  23.           this.$message.closeAll();
  24.           this.$message.error('上传的图片最大尺寸为108*108!');
  25.           return
  26.         }
  27.     })