Element ui上传文件upload组件后端code报错406

最新推荐文章于 2025-12-04 13:49:48 发布

原创最新推荐文章于 2025-12-04 13:49:48 发布 · 787 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui

本文介绍了如何使用Element UI的upload组件时，通过http-request属性定制上传行为，解决前端代码报错并处理后端返回的JSON格式响应。实践包括设置FormData，自定义请求API和方法，以确保前后端有效对接。

问题描述：用elementui组件upload上传文件，用postman可以跑通，但是在前端代码报错,后端返回响应json格式;

问题解决：用组件这个属性http-request，覆盖默认的上传行为，然后自定义上传的实现，然后自己写一个请求的接口API和方法；

<el-upload
  class="upload-demo"
  drag
  :http-request="fileUpload"
  multiple>
</el-upload>

// 请求的方法 写到vue的methods里
fileUpload(file){
        const parasm = new FormData()
        let files = file.file
        params.append("file",files)
        fileUpload(params).then(res=>{})
}
// request方法需要自己调用
export const fileUpload =function (data){
        return request({
            url:"请求地址"，
            method:"post",
            data
        }).then((res)=?res.data)
}