論的正確使用方法

論<el-upload>的正確使用方法
表單裏有上傳控件
看遺留代碼是這麼用的

<el-form :model="ruleForm"
         ref="ruleForm">
    <el-form-item label="上傳文件">
        <el-upload class="upload-demo"
                   :on-success="successUpload"
                   :action="mixinUploadUrl"
                   :on-remove="handleRemove"
                   :file-list="fileList">
            <el-button size="small"
                       type="primary">點擊上傳</el-button>
        </el-upload>
    </el-form-item>
    <el-form-item>
        <el-button type="primary"
                   @click="submitForm('ruleForm')">導出</el-button>
    </el-form-item>
</el-form>
<script>
export default {
  data () {
      return {
          fileList: [],
          ruleForm: {
              fileList: []
          },
      }
  },
  methods: {
    handleRemove (file, fileList) {
        // 刪除時在表單的某個字段裏移除一個值
        let tmp = this.ruleForm.fileList
        let url = file.response.result[0].url
        if (tmp.includes(url)) {
            tmp.splice(tmp.findIndex(item => {
                return item === url
            }), 1)
        }
    },
    successUpload (response, file, fileList, $event) {
      // 上傳成功在表單的某個字段里加一個值
        this.ruleForm.fileList.push(file.response.result[0].url)
    },
    submitForm (formName) {
        let fileList = this.ruleForm.fileList
        // 使用fileList與服務端交互 該字段只包含服務端數據
    },
  }
}
</script>

其實successUpload和handleRemove沒有必要使用，只須要在提交的時候獲取到已經上傳到服務端的文件相關信息(如服務端保存路徑，惟一標識等)便可

觀察fileList在文件上傳先後沒有任何變化，說明該字段不是動態的
推測應該有個字段保存着服務端返回數據列表仔細查看後發現的確如此
其實el-upload組件有個屬性uploadFiles是會根據上傳文件結果進行動態處理的，上傳成功增長一個移除掉一個，提交表單時只須要處理該字段便可

更好的使用流程以下：

<el-form :model="ruleForm"
         ref="ruleForm">
    <el-form-item label="上傳文件">
        <el-upload ref="uploada"
                   :action="mixinUploadUrl"
                   :file-list="fileList">
            <el-button size="small"
                       type="primary">點擊上傳</el-button>
        </el-upload>
    </el-form-item>
    <el-form-item>
        <el-button type="primary"
                   @click="submitForm('ruleForm')">導出</el-button>
    </el-form-item>
</el-form>
<script>
export default {
  data () {
      return {
          fileList: [],
      }
  },
  methods: {
    submitForm (formName) {
        //包含上傳的文件信息和服務端返回的全部信息都在這個對象裏
        this.$refs.uploada.uploadFiles
    },
  }
}
</script>