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>