本地上传获取进度&把本地文件变为预览地址可以播放

<input type="file" ref='file' id='newPriod' @change="uploadPic('newPriod')">

uploadPic(el) {
                let uploadPic = document.getElementById(el)
                if (uploadPic.value) {
                    let file = uploadPic.files[0] // 获取文件对象
                    if (!file.name.split('.')[1].includes('mp3') && !file.name.split('.')[1].includes('mp4')) {
                        this.$message.error('仅支持MP3、MP4格式')
                        this.$refs.file.value = ''
                        return false
                    }
                    this.fileList = []
                    this.fileList.push({
                        name: file.name.split('.')[0],
                        type: this.fileType(file.name.split('.')[1]),
                        path: window.URL.createObjectURL(file) // 将文件对象变为预览地址可以使其播放
                        // id: file.id,
                        // duration: file.duration
                    })
                    const formData = new FormData()
                    formData.append('file', file)
                    this.$axios.post('/xxx', formData, {
                        onUploadProgress: function () {
                            let pro = Math.floor(
                                (arguments[0].loaded / arguments[0].total) * 100
                            )
                            // 获取上传进度
                            console.log(pro)
                        },
                        timeout: 0
                    }).then(res => {
                        console.log(res)
                    })
                    // 上传文件后将file标签的值设置为空 避免造成第二次上传相同文件不显示的问题
                    this.$refs.file.value = ''
                }
            }