vue 实现 图片限制+300x300

Posted 2021-12-28 fengshaopu

可以用element-ui的上传器

    <el-upload
              action="http://testwcmd.sinoing.net/Upload/uploadChargeFace"
              name="userImage"
              :before-upload="beforeUploadFile"
              :on-success="handleSuccess"
              :on-change="fileChange"
              accept="image/jpeg,image/jpg,image/png"
            >
              <el-button type="primary" size="small" style="margin-left:20px" @click="button()"
                >上传头像</el-button
              >
            </el-upload>

 //上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
    function beforeUploadFile(file) 
      console.log("before upload");
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      var testmsg = /^image\\/(jpeg|png|jpg)$/.test(file.type);
      if (!testmsg) 
        ElMessage.warning("上传图片格式不对!");
        return;
      else

         const isSize = new Promise(function (resolve, reject) 
        const width =300 // 限制图片尺寸为300x300
        const height = 300
        const URL = window.URL || window.webkitURL
        const img = new Image()
        img.onload = function () 
          const valid = img.width === width && img.height === height
          valid ? resolve() : reject()
        
        img.src = URL.createObjectURL(file)
      ).then(
        () => 
          return file
        ,
        () => 
            ElMessage(
        message: '图片不规范，请按要求上传',
        type: 'warning',
      )
          return Promise.reject()
        
      )
          return isSize 
 
 
    
    

vue3实现多选图片

      <el-upload
                    class="avatar-uploader"
                    action="http://testwcmd.sinoing.net/Upload/uploadAtivityMedia"
                    name="userImage"
                    limit="10"
                    :show-file-list="false"
                    :multiple="queryParams.multiple"
                    :on-success="handleAvatarSuccess"
                  >
                    <el-row>
                      <el-col>
                        <div class="zho">
                          <span style="color:#ff7777;font-size:14px;"
                            >点击上传</span
                          >
                          ,
                          <span style="color:#2d8eff;font-size:14px;"
                            >一次最多可以上传10张</span
                          ><br />
                          <span style="color:#cccccc;font-size:12px;"
                            >已上传
                              queryParams.img.length
                            张，还可以上传<span>
                              
                                queryParams.shuu - queryParams.img.length
                              张</span
                            ></span
                          >
                        </div>
                      </el-col>
                    </el-row>
                  </el-upload>

 function handleAvatarSuccesss(res, file) 
      console.log(res, file);
      var a = "http://" + res.data[0];
      var obj = 
        img: a,
        che: false
      ;
      queryParams.imgu.push(obj);
      queryParams.imgu.reverse();
      queryParams.imgu = queryParams.imgu;