element 上传图片格式、大小限制

vue   部分

<el-upload
        ref="upload"
        class="avatar-uploader define-uploader"
        accept=".jpg, .jpeg, .png"
        :file-list="fileList"
        :auto-upload="false"
        :show-file-list="false"
        action
        :http-request="carouselUpload"
        :on-change="handleChange"
      >
        <img
          v-if="imageUrl"
          :src="imageUrl"
          class="avatar"
        />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i> 
     </el-upload>
     
    <el-button plain @click="uploadFile()">手动上传</el-button>

js部分

 <script>
     export default{
         data(){
          fileList: [],
          imageUrl:"",
        },
        methods:{
         handleChange(file, fileList) {
              var _this = this;
              const isTypeTrue = /^image\/(jpeg|png|jpg)$/.test(file.raw.type);
              const isLt300K = file.raw.size / 1024 < 300;
              // _this.saveData.imageUrl ="";
              if (!isLt300K) {
                this.$message.error("上传图片大小不能超过300K!");
                return;
              }
              if (!isTypeTrue) {
                this.$message.error("上传图片格式不对!");
                return;
              }
             
              new Promise(function(resolve, reject) {
                //upload内部需要一个promise,简单的return出false并没有什么用
                let width = 714;
                let height = 280;
                let _URL = window.URL || window.webkitURL;
                let img = new Image();
                img.onload = function() {
                  let valid = img.width == width && img.height == height;
                  valid ? resolve() : reject();
                };
                img.src = _URL.createObjectURL(file.raw); //onload是异步加载
              }).then(
                () => {
                  _this.imageUrl = URL.createObjectURL(file.raw);
                  console.log("222");
                  return file.raw;
                },
                () => {
                  this.$message.error("上传的图片必须是714*280!");
                  return Promise.reject();
                }
              );
        
              if (fileList.length > 0) {
                this.fileList = [fileList[fileList.length - 1]]; // 这一步,是 展示最后一次选择的csv文件
              }
            },
        
            carouselUpload(param) {
               //此处写手动上传的方法,上传的地址及方式;
            },
            //手动上传
            uploadFile(){
            //这里上传的执行的就是carouselUpload() 方法;
               this.$refs.upload.submit();
            }
        }
     }
</script>

上一篇:el-upload 上传携带参数


下一篇:vue中XLSX解析excel文件