0
点赞
收藏
分享

微信扫一扫

Vue上传文件到springboot

b91bff6ffdb5 2022-03-24 阅读 135
            <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) {
	// 逻辑
}
举报

相关推荐

0 条评论