axios 使用 formData 提交表單數據顯示進度條

近期學習小結

若是直接使用表單提交數據，在 submit 以後會從新跳轉到 action 指定的路徑，若是不想跳轉頁面而且獲取表單提交成功的數據，就必須使用 ajax 請求提交表單數據。

axios 使用 formData 提交表單數據顯示進度條

html 文件

<form id='formfile'>
      <input type="file" name="multi_upload[]" ref="upload" id="upload" multiple webkitdirectory="" onchange="selectFolder">
   </form>
   <el-progress type="circle" :percentage="process"></el-progress>   // 本次 demo 使用 element ui

js 文件

let formfile = document.getElementById('formfile')
    let formData = new FormData(formfile)
    let config = {
        headers: {
            'Content-Type': 'multipart/form-data'
        },
        onUploadProgress: (progressEvent) => {
            // 使用本地 progress 事件
            if (progressEvent.lengthComputable) {
                let num = Math.round((progressEvent.loaded / progressEvent.total) * 100)
                this.process = num // 使用某種 UI 進度條組件會用到的百分比
            }
        }
    }
    axios.post('/upload', formData, config).then((res) => {
        console.log(res)
    })

給隱藏的元素綁定事件

1. display: none;   沒法點擊
2. visibility:hidden; 沒法點擊
3. 設置透明度  opacity: 0; 能夠點擊

element ui 的 Dialog 點擊右上角的叉號調用回調函數

使用 Dialog 的 before-close 屬性

<el-dialog title="上傳" :visible.sync="uploadDialog" width="50%" center :close-on-click-modal="false" :before-close="closeDialog" >
</el-dialog>