Vue上传文件案例，文件参数和其他参数同时传递（转载）

需求简述： 文件上传，从前端页面上 通过选择本地文件或拖拽文件 将文件上传到阿里OSS上，并将记录写进数据库；其中有文件流为参数，还有用户信息啥啥啥的其他参数都要同时从前端传到后端去；

html

<template>
    <el-dialog
        title="上传音乐"
        :visible.sync="isShow"
        @update:visible="val => $emit('update:visible', val)"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        custom-class="video-add-musics-dialog"
        size="tiny">
        <el-tabs v-model="activeName">
            <!-- <el-tab-pane label="本地上传" name="local"> -->
                 <el-upload
                        accept=".mp3"
                        class="upload-demo"
                        drag
                        action="str"  
                        :http-request="handlerChange"
                        :auto-upload="true"
                        :before-remove="true"
                        multiple>
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        <div class="el-upload__tip" slot="tip">仅支持Mp3格式，建议大小在1Mb以内，时长9～60秒。</div>
                    </el-upload> 
                <div class="upload-confirm-bar">
                    <ul class="tips"> 
                        <li>注意：视频自动从音乐片头开始，上传请自行裁剪</li>
                    </ul>
                </div>
            <!-- </el-tab-pane> -->
        </el-tabs>
        
    </el-dialog>
</template>

js

<script>
// import imageSpace from 'components/imageSpace'
export default {
    name: 'addMusicDialog',

    props: {
        visible: {
            type: Boolean,
            default: false
        },
        musics: {
            type: Array,
            default () {
                return []
            }
        }
    },
    data () {
        return {
            isShow: false,
            activeName: 'local',
            uploadedImages: [],
            tbImage: '',
            addTblmageLoading: false,
            fileList: [],
            musicTitle:" ",
            nick:"" //tb979768_44
        }
    },
    computed: {
        bbtApi () {
            return this.$store.state.bbtApi
        }
    },
    methods: {  


        handlerChange (param,type) {        
            this.musicTitle = param.file.name.slice(0,-4)
            // this.fileList = fileList

            let formData = new FormData()
            formData.append('files', param.file)
            // formData.append("fileId", "")  // 额外参数


            axios.post('url.post?nick='+this.nick+'&musicTitle='+this.musicTitle,formData)
            .then(res => {
                this.$message("上传成功")
                this.musics = this.musics.splice(0,0,{musicTitle : this.musicTitle, musicUrl : res.data.data.subMsg})
                
            }) 
            .catch(err => {
                console.log(err)
            })

        },

        onFocus (event) {
            event.target.select()
        }
    },

    watch: {
        visible: {
            handler (val) {
                this.isShow = val
            },
            immediate: true
        }
    }
}
</script>

java
这里其他参数别封装成对象，会出现问题；

@PostMapping("/url.post")
public JsonDTO uploadMp3(@RequestParam(value = "files") MultipartFile files , @PathParam(value = "nick") String nick, @PathParam(value = "musicTitle") String musicTitle) {
	
	// 获取文件流和其他参数，将文件上传到要上传的地方去，根据参数要进行什么其他操作也照做;
	rerurn;
}

转自：https://blog.csdn.net/LuckKing0925/article/details/107979682/