vue上传文件如何连接后端接口【参数格式要求multipart/form-data】

最新推荐文章于 2024-04-21 21:27:08 发布

xinruliu

最新推荐文章于 2024-04-21 21:27:08 发布

阅读量3.5k

点赞数 2

文章标签： javascript html

本文链接：https://blog.csdn.net/m0_48728478/article/details/123814939

版权

这篇博客介绍了在Vue中使用Element-UI的el-upload组件上传文件时遇到的跨域和后端收不到文件的问题。解决跨域问题通过使用httpRequest和axios，而文件为空问题则需要手动处理formData。此外，博主还提到el-upload的删除功能需要自定义方法来实现，因formData无法直接按索引删除文件。

摘要由CSDN通过智能技术生成

前端上传文件的组件–> el-upload
不知道其他人有没有遇到这个问题，使用element-ui提供的样例上传样式，就是把action改成自己的后端接口，第一个问题会出现跨域，就是一般是报403错误，第二个问题是老是后端收不到数据，说files为空。尤其是第二个问题，头发都给抓没了，然后才想到一个可以替代的方法，当然如果大家都没有出现这个问题，只能说是我自己功夫不到家o(╥﹏╥)o
跨域的解决方法是放弃action，转战httprequest（element ui 用于覆盖action的方法，可以自己写），也不要像其它接口一样直接接地址，就是用一下axios（一个用于创建http请求和转换请求数据的库）
为空的解决方法就是自己去把数据拿出来，然后再放到请求里面去

html

<el-upload
   :action="action"
   :file-list="modeList1"
   :http-request="modeUpload1"
   :headers="headerObj"
   :multiple="true"
   :before-remove="handleRemove1"
>
<el-button size="small" type="primary">上传</el-button