vue使用elementui上传文件

使用elementui的el-upload实现选择文件并上传，代码如下：

<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/index' }">文件管理系统</el-breadcrumb-item>
            <el-breadcrumb-item>添加文件</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- list-type:文件类型，text/picture/picture-card -->
        <el-upload
                class="upload-demo"
                ref="upload"
                :action="uploadAction"
                :headers="fileInfor"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :on-change="handleChange"
                :before-upload="beforeUpload"
                :file-list="fileList"
                :auto-upload="false"
                :multiple="true"
                :limit="1"
                list-type="txt">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
            <el-button style="margin-left: 10px;" size="small" type="info" @click="resetList">清空列表</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
        <el-button
            size="mini"
            type="text"
            icon="el-icon-download"
            @click="download('row')"
            v-hasPermi="['hospital:treatment:download']"
        >下载方案
        </el-button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                fileList: [],
                fileInfor: {},
                uploadAction: '/files/upload'
            }
        },
        created() {
            this.getBaseUrl()
        },
        methods: {
            download(row) {
                console.log(row);
                // 方式1
                // window.open(process.env.VUE_APP_BASE_API + "/hospital/file/downloadFile?tPath=" + tPath)
                // 方式2
                // var name = row.tFileName;
                // var url = row.tFilePath;
                var name = "图片";
                var url = 'https://lcar-system-media.oss-cn-shenzhen.aliyuncs.com/temp/3副本_1609059835259.jpg';
                const a = document.createElement('a')
                a.setAttribute('download', name)
                a.setAttribute('target', '_blank')
                // a.setAttribute('href', "/hospital/file/downloadFile?tPath=" + url)
                a.setAttribute('href', url)
                a.click()
            },
            getFileInfor() {
                this.fileInfor.authorization = window.sessionStorage.getItem('token')
            },
            submitUpload() {
                this.$refs.upload.submit();
                console.log(this.$refs.upload)
            },
            getBaseUrl() {
                if (this.$baseURL) {
                    this.uploadAction = this.$baseURL + '/files/upload'
                }
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            handleChange(file, fileList) {
                console.log(file)
                console.log(fileList);
            },
            beforeUpload (file) {
                console.log(file)
                const typeAll = file.type.split('/')
                if (typeAll[0] === 'video') {
                    const isLt80M = file.size / 1024 / 1024 < 80
                    if (['video/mp4'].indexOf(file.type) === -1) {
                        this.$message.error('上传的视频只能是mp4格式')
                        return false
                    }
                    if (!isLt80M) {
                        this.$message.error('上传视频大小不能超过80MB')
                        return false
                    }
                } else {
                    const isLt5M = file.size / 1024 / 1024 < 5
                    if (['image/jpeg', 'image/jpg', 'image/png', 'image/gif'].indexOf(file.type) === -1) {
                        this.$message.error('上传的图片只能是png、jpg、jpeg、gif格式的图片')
                        return false
                    }
                    if (!isLt5M) {
                        this.$message.error('上传的图片大小不能超过5MB')
                        return false
                    }
                }
                let fd = new FormData();
                fd.append('file',file);//传文件
                fd.append('type',file.type)
                fd.append('name',file.name)
                // axios.post('/api/up/file',formData).then(function(res){
                //     console.log('成功')
                // })
                console.log(JSON.stringify(fd.get('name')))
                console.log(typeAll)
                
            },
            resetList() {
                this.$refs.upload.clearFiles()
            }
        }
    }
</script>

<style scoped>

</style>