el-upload手动上传图片,限制图片大小格式

Posted 2020-12-10 duanzhenzhen

部分代码：

template部分

<el-form
                   ref="addForm"
                   :rules="rules"
                  :model="addForm"
                  size="medium"
                  label-width="100px">
              <el-row>
                <el-col :span="12">
                <el-form-item label="知识标题：" prop="knowledgeTitle">
                  <el-input v-model="addForm.knowledgeTitle" ></el-input>
                </el-form-item>
                </el-col>
                <el-col :span="12">
                <el-form-item label="内容：" prop="knowledgeContent">
                  <el-input v-model="addForm.knowledgeContent"></el-input>
                </el-form-item>
                </el-col>


<!-- 图片上传 -->
                <el-col :span="12">
                <el-form-item label="图片选择：" >
                <el-upload
                  action="#"
                  ref="uploadimg"
                  :limit="1"
                  :auto-upload="false"
                  :show-file-list="true"
                  :http-request="httpRequest"
                  :file-list="fileList"
                  list-type="picture-card"
                  :on-exceed="handleExceed"
                  :before-remove="handleRemove"
                  >
                  <i class="el-icon-plus"></i>
                </el-upload>
                </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="状态：" prop="knowledgeStatus">
                    <el-select
                    v-model="addForm.knowledgeStatus"
                    placeholder="请选择"
                    @change="selectStatus"
                    >
                      <el-option label="可用" :value=0>
                      </el-option>
                      <el-option label="已禁止" :value=1>
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
            </el-row>
            <el-row>
              <div class="submitBtn">
                <el-button type="primary" icon="el-icon-check"
                @click="uploadSucess(‘addForm‘)"
                >提交</el-button>
                <el-button type="danger" icon="el-icon-circle-close"
                @click="cancleUpload"
                >取消</el-button>
              </div>
            </el-row>
        </el-form>

 

methods:

handleExceed(files) {
      this.$message.warning(‘当前限制选择1个文件‘);
    },
//删除文件
    handleRemove(file,fileList) {
      console.log(file);
      fileList.splice(0,1);
      this.fileList=fileList;
      this.uploadFile = null;
      console.log(‘3333333‘,this.fileList);
      this.changeUrl = file.url;
    },


    httpRequest(params){
      const file = params.file;
      const isJPG = (file.type === ‘image/png‘) || (file.type === ‘image/jpg‘) || (file.type === ‘image/jpeg‘);
      const isLt5M = file.size / 1024 / 1024 < 5;
      this.uploadFile =  file || null;
      //解决删除文件时报错
      // const prom = new Promise((resolve, reject) => {})
      // prom.abort = () => {}
      // return prom
      const prom = new Promise((resolve, reject) => {
        if (!isJPG) {
          this.$message({
            type:‘error‘,
            message:‘上传图片只支持JPG、JPEG、PNG格式!‘
          })
        }else if (!isLt5M) {
          this.$message({
            type:‘error‘,
            message:‘上传图片大小不能超过 5MB!‘
          })
        }
        return isJPG && isLt5M;
        resolve();
      })
      prom.abort = () => {}
      return prom

    },

cancleUpload(){
  this.alertBox = false;
  this.fileList = [];
},

表单提交methods:

//  上传提交
     uploadSucess(formName){
         this.$refs.uploadimg.submit();
         let formData = new FormData();
       console.log(‘22222222‘,this.uploadFile,!this.uploadFile);
       if(this.addText=="add"){
         console.log(‘..........‘,this.uploadFile);
         if(!this.uploadFile){
           this.$message.error(‘图片不能为空！‘)
         }else{

           formData.append("file",this.uploadFile);
           formData.append("title",this.addForm.knowledgeTitle);
           formData.append("content",this.addForm.knowledgeContent);
           formData.append("status",this.addForm.knowledgeStatus);
           this.$refs[formName].validate((valid)=>{
             if(valid){
               this.$store.dispatch("baseSet/uploadSucess",formData)
                 .then(()=>{
                   this.knowledgeManager(this.pageNum);
                   this.alertBox = false;
                   this.$refs.uploadimg.clearFiles();
                   this.ifStatus = false;
                 })
             }
           })
         }
         
       }else{
         let changeStatus = null;
         if(this.ifStatus){
           changeStatus = this.addForm.knowledgeStatus;
         }else{
            this.addForm.knowledgeStatus==‘可用‘?changeStatus=0:changeStatus=1;
         }

         console.log(this.addForm.knowledgeTitle);
         if(this.uploadFile){
           formData.append("file",this.uploadFile);
         };

         if(this.addForm.knowledgeTitle==‘‘){
           this.$message.warning("请添加标题");
         }else if (this.addForm.knowledgeContent==‘‘) {
           this.$message.warning("请添加内容");
         }else{
           formData.append("title",this.addForm.knowledgeTitle);
           formData.append("content",this.addForm.knowledgeContent);
           formData.append("status",changeStatus);
           formData.append("id",this.changeId);
          this.$store.dispatch("baseSet/changeKnowledge",formData).then(()=>{
                this.knowledgeManager(this.pageNum);
                this.alertBox = false;
                this.ifStatus = false;
            })
         }
       }
     },