记录element的图片上传multipart/form-data报错

最新推荐文章于 2023-03-28 16:57:57 发布

getyefang

最新推荐文章于 2023-03-28 16:57:57 发布

阅读量664

点赞数

分类专栏： vue 文章标签： vue vue.js html

本文链接：https://blog.youkuaiyun.com/qq_36821274/article/details/121639768

版权

vue 专栏收录该内容

19 篇文章

订阅专栏

博客讲述了在使用Vue和Element UI进行文件上传时遇到的问题，包括multipart格式错误，导致后台接收图片为null。问题根源在于格式化值转换为URL.createObjectURL(file.raw)，解决方案是使用new FormData()正确构造上传数据。提醒开发者注意上传文件时的数据格式正确性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

按照element文档上的设置好各种参数之后

<el-upload
    class="photoupload"
    :ref="`uploadimg${index}`"
    :show-file-list="false"
    :http-request="requestUpload"
    name="mFiles"
    :auto-upload="false"
    :on-change="uploadChange"
>
    <img :src="item.url" v-if="item.url" @click="imgclick(item,index)" />
    <i class="el-icon-plus" v-else @click="imgclick(item,index)"></i> 
</el-upload>

最后请求的时候报错了， multipart无边界什么的错误，

最后折腾老半天发现原来是自己负值的时候格式化了值转成了URL.createObjectURL(file.raw)

格式不对后台的图片一直接收为null，差点头秃！

最后找了别人的input上传重新写demo发现问题所在！

注意：一定要new FormData()