elementui中el-upload自定義上傳方法中遇到的問題

由於el-upload控件中自定義的upload方法在上傳文件中是以FormData的格式上傳，后台服務器無法解析這種格式的body，所以通過http-request屬性自定義了一個上傳方法。

<el-upload
    class="upload-demo"
     ref="upload"
    action="http://127.0.0.1:5000/json/import"
    :http-request="myUpload"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :on-error="handleError"
    :on-success="handleSuccess"
    :file-list="fileList"
    :auto-upload="false">
    <el-button slot="trigger" size="small" type="primary">選取文件</el-button>
    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上傳到服務器</el-button>
    <div slot="tip" class="el-upload__tip">只能上傳json文件，且不超過500kb</div>
</el-upload>

myUpload(content) {
    console.log('myUpload...');
    this.$axios({
        method: 'post',
        url: content.action,
        timeout: 20000,
        data: content.file
    }).then(res => {
        content.onSuccess('配時文件上傳成功')
    }).catch(error => {
        if (error.response) {
            // The request was made and the server responded with a status code
            // that falls out of the range of 2xx
            content.onError('配時文件上傳失敗(' + error.response.status + ')，' + error.response.data);
        } else if (error.request) {
            // The request was made but no response was received
            // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
            // http.ClientRequest in node.js
            content.onError('配時文件上傳失敗，服務器端無響應');
        } else {
            // Something happened in setting up the request that triggered an Error
            content.onError('配時文件上傳失敗，請求封裝失敗');
        }
    });
}

這種方式很常見，唯一要注意的點是在上傳方法調用后判斷結果成功或者失敗的時候，需要回調el-upload控件的onSuccess和onError方法，為的是能夠復用el-upload原生的一些動作，比如如果成功了，頁面上的文件列表會有一個綠勾標記上傳成功的文件，如果失敗則會把失敗的文件從文件列表中刪除，如果不回調是沒有這些功能的。