axios+springboot 文件上传

思路：

• 客户端通过表单方式上传
• 服务端使用 @RequestParam 接收

注意事项：

• 服务端接收所有表单数据时，只能使用 @RequestParam ，不能使用@RequestBody
• 前端要把文件

代码：

    @PutMapping(path = "/app/questions/{id}")
    @Transactional
    public void update(@PathVariable Long id,
                       @RequestParam String title,
                       @RequestParam("explainFile") MultipartFile explainFile) throws IOException {
		// 使用 explainFile.getInputStream());
    }

<div id="app">
    <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="标题">
            <el-input type="textarea" v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="选项">
            <div class="flex" v-for="option in form.options">
                {{option.label}} &nbsp;&nbsp;
                <el-input type="textarea" v-model="option.content"></el-input>
            </div>
        </el-form-item>
        <el-form-item label="正确答案">
            <el-input type="text" v-model="form.rightOptionLabel"></el-input>
        </el-form-item>
        <el-form-item label="点拨">
            <el-input type="textarea" v-model="form.explainText"></el-input>
        </el-form-item>
        <el-form-item label="点拨录音">
            <input type="file" name="explainFile" @change="getFile($event)" ref="explainFileInput">
            只能上传mp3文件，且不超过5M
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button>取消</el-button>
        </el-form-item>
    </el-form>
</div>

methods: {
    onSubmit() {
        const self = this
        const config = {
            headers: {"Content-Type": "application/x-www-form-urlencoded"}
        };
        const params = Object.assign({}, self.form)

        params.options = JSON.stringify(params.options)
        let formData = new window.FormData()
        for (let i in params) {
            formData.append(i,params[i]);
        }

        axios.post('/app/questions', formData, config)
            .then(function (res) {
                self.$notify.success({message: '创建成功，ID为' + res.data.id});
                self.$refs.explainFileInput.value = null
            }).catch(function (error) {
            console.log(error);
        });
    },
    getFile(event) { //将 file 拼入表单
        this.form.explainFile = event.target.files[0]
    }
}