Vue上传文件到springboot

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

            <el-upload class="upload-demo" ref="upload" accept="image/png,image/jpg,image/jpeg" :file-list="fileLists" :on-preview="handlePreview" :on-change="handleChange" :on-remove="handleRemove" :auto-upload="false" list-type="picture">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
            <br>
            <el-button size="small" type="success" @click="submitUpload">上传到服务器</el-button>

在data中定义

        data: { 
   
            fileLists: [],

使用on-change属性，将每次添加的文件依次推入到fileLists中，然后将fileLists的文件使用formData封装，请求头为'multipart/form-data'

            handleChange(file) { 
   
                this.fileLists.push(file)
            },
            submitUpload() { 
   
                const formData = new FormData()
                // 因为要传一个文件数组过去，所以要循环append
                this.fileLists.forEach((file) => { 
   
                    formData.append('files', file.raw)
                })
                this.uploadRequest(formData)
            },
            uploadRequest(formData) { 
   
                let that = this;
                axios.post("http://localhost:8080/new/upload", formData, { 
   
                    headers: { 
   
                        'Content-Type': 'multipart/form-data'
                    }
                })
                    .then(function (res) { 
   
                        console.log(res)
                        if (res.data.result == "ok") { 
   
                            that.$message.success('上传成功!');
                        }
                    })
                    .catch(function (err) { 
   
                        that.$message.error('网络请求异常!');
                    })
            },

后端代码：

    @PostMapping("/new/upload")
    public BaseResultModel uploadPic(@RequestParam("files") MultipartFile[] files) { 
   
	// 逻辑
}