el-upload手動上傳圖片,限制圖片大小、格式

部分代碼：

template部分

<!-- 修改彈窗 -->
   <el-dialog :title="dialogTxt"
              @close="closeDialog"
              :visible.sync="alertBox"
              >
              <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" :on-change="imageChange" :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>
    </el-dialog>

 

 

methods:

//關閉彈框清空校驗信息
     closeDialog(){
       this.$refs.expertForm.clearValidate();
     },
     //選擇圖片后做圖片格式限制（手動上傳圖片時，before-upload鈎子無效，使用此方法替代）
 imageChange(file, fileList) { const isImage = file.raw.type == 'image/png' || file.raw.type == 'image/jpg' || file.raw.type == 'image/jpeg'; const isLt5M = file.size < 1024 * 1024 * 5; if (!isImage) { this.$message.error('上傳只能是png,jpg,jpeg格式!'); } if (!isLt5M) { this.$message.error('上傳圖片大小不能超過 5MB!'); } if(isImage && isLt5M){ this.uploadFile = file.raw || null; }else{ fileList.splice(-1,1); } }, //超出限制個數鈎子
    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 prom = new Promise((resolve, reject) => {})
      prom.abort = () => {}
      return prom
    },
    selectStatus(){
      this.ifStatus = true;
    },
    //  上傳提交
     uploadSucess(formName){
         this.$refs.uploadimg.submit();
         let formData = new FormData();
       if(this.addText=="add"){
         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{
         if(!this.uploadFile){
           this.$message.error('圖片不能為空！')
         }else{
           if(this.uploadFile){
             formData.append("file",this.uploadFile);
           };

           formData.append("title",this.addForm.knowledgeTitle);
           formData.append("content",this.addForm.knowledgeContent);
           formData.append("status",this.addForm.knowledgeStatus);
           formData.append("id",this.changeId);
           this.$refs[formName].validate((valid)=>{
             if(valid){
               this.$store.dispatch("baseSet/changeKnowledge",formData)
                 .then(()=>{
                   this.knowledgeManager(this.pageNum);
                   this.alertBox = false;
                   this.$refs.uploadimg.clearFiles();
                   this.ifStatus = false;
                 })
             }
           })
         }
       }
     },
     cancleUpload(){
       this.alertBox = false;
       this.fileList = [];
     },