reagent_manage/vue/src/view/example/component/uploadPage.vue

<template>
    <div>
        <div class="tip-row">
            根据业务需求简单封装了upload，集成自带预览组件<br/>
            非图片类型的文件使用<a href="https://github.com/kekingcn/kkFileView" target="_blank">kkFileView</a>预览
        </div>
        <upload-file :file-list="fileList"/>
        <div class="tip-row">原始使用axios的上传</div>
        <input @change="change" type="file">
    </div>
</template>

<script>
import UploadFile from '@/component/UploadFile'
import request from "@/config/request"

export default {
    name: "uploadExample",
    components: {UploadFile},
    data() {
        return {
            fileList: [
                {
                    url: 'https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4018557288,1217151095&fm=26&gp=0.jpg',
                    name: '1jpgjpgjpgjpgjpgjp1jpgjpgjpgjpgjpgjpgjpggjpg.jpg'
                },
                {
                    url: 'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3252521864,872614242&fm=26&gp=0.jpg',
                    name: '2.jpg'
                },
                {
                    url: 'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2534506313,1688529724&fm=26&gp=0.jpg',
                    name: '3.jpg'
                },
            ]
        }
    },
    methods: {
        change(e) {
            let file = e.target.files[0]
            let param = new FormData()

            let selfFilename = '这是自己另外取得文件名'

            //这样的文件名称就是selfFilename
            param.append('file', file, selfFilename)

            //这样的文件名称就是上传时的名称
            //param.append('file', file)

            //也可以用RequestParam根据键名去取额外参数
            param.append('extraParam1', "额外参数1")
            param.append('extraParam2', "额外参数2")
            request.post('/test/upload', param, {headers: {"Content-Type": "multipart/form-data"}})
                .then(({data}) => alert(data))
        }
    }
}
</script>