data:

data() {
      return {
        joblistData:[],

        total:0,
        pageNo:1,
        pageSize:10,
        showAddData: false,
        jobForm:{
          jobChinese: '',
          jobEnglish:'',
          name:'',
          picture:''
        },
        showUpdateData:false,

        imgInfo: 
 
null,
        imgSrc: null,

        jobChinese:'',
        jobEnglish:'',
        name:'',


        showCode: false,
        code:'',

        showImgFile:false,
        imgFileUrl: '',

        jobRules: { // 表單規則
          jobChinese: [{ required: true, message: '請輸入中文職稱', trigger: 'blur' }],
          jobEnglish: [{ required: 
 
true, message: '請輸入英文職稱', trigger: 'blur' }],
          name: [{ required: true, message: '請輸入名字', trigger: 'blur' }],
          picture: [{ required: true, message: '請上傳圖片', trigger: 'change' }],
        },




      };
    },

彈窗表單：

<el-dialog :visible.sync="showAddData" title="新增職位" width="40%
 
" :close-on-click-modal="false" @close="noAddData">
            <el-form ref="jobForm" :model="jobForm" label-width="100px" style="height: 400px" :rules="jobRules">
                <el-form-item label="名字:"  prop="name">
                    <el-input v-model="jobForm.name" placeholder="請輸入名字"></el-input>
                </el-form-item>
                <el-form-item label="中文職位:" prop="jobChinese">
                    <el-input v-model="jobForm.jobChinese" placeholder="請輸入中文職位"></el-input>
                </el-form-item>
                <el-form-item label="英文職位:" prop="jobEnglish">
                    <el-input v-model="jobForm.jobEnglish" placeholder="請輸入英文職位"></el-input>
                </el-form-item>
                <el-form-item label="圖片:" prop="picture">
                    <div class="upload-img" style="width: 148px; height: 100px;" >
                        <input type="file" ref="fileBtn" @change="uploadImg" />
                        <img v-if="imgSrc" :src="imgSrc" class="img" ref="img" style="width: 70px;height: 70px" />
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitAdd('jobForm')">確認新增</el-button>
                    <el-button @click="noAddData">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

methods:

methods: {
  uploadImg() {
        const that = this
        const inputFile = this.$refs.fileBtn.files[0]
        let res = ''
        this.inputFile = inputFile
        if (this.inputFile) {
          let inputFile = this.inputFile
          if (inputFile.type !== 'image/jpeg' && inputFile.type !== 'image/png' && inputFile.type !== 'image/gif') {
            net.message(this, "不是有效的圖片檔案！", "warning");
            return
          }
          if (inputFile.size > 1024*48) {
            net.message(this, "請上傳小於 48K 的圖片 ！", "warning");
            return
          }
          this.imgInfo = Object.assign({}, this.imgInfo, {
            name: inputFile.name,
            size: inputFile.size,
            lastModifiedDate: inputFile.lastModifiedDate.toLocaleString()
          })
          const reader = new FileReader()
          res = reader.readAsDataURL(this.inputFile)
          reader.onloadend = function() {
            const strBase64 = reader.result.substring(0);

          }
          reader.onload = function(e) {
            that.imgSrc = this.result
            that.jobForm.picture = this.result
          }
        } else {
          return
        }
      },
submitAdd(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const params = {
              jobChinese: this.jobForm.jobChinese,
              jobEnglish: this.jobForm.jobEnglish,
              name: this.jobForm.name,
              picture: this.imgSrc.substring(this.imgSrc.indexOf(',')+1)
            }
            // 發起請求，傳資料給後臺
          } else {
            return false;
          }
        });
      },      
}