Vue Element-ui上传图片踩坑

Element-ui上传图片踩坑

使用Element-ui组件上传图片时，使用自带的action发起上传请求时碰到400错误

错误代码

<el-uploadclass="upload-demo"action="http://localhost:8080/create/uploadAvatar":on-preview="handlePreview":on-remove="handleRemove":before-remove="beforeRemove":limit="1":on-exceed="handleExceed":file-list="fileList"list-type="picture":before-upload="beforeUpload"  //上传之前执行:data="dataForm"   //上传时额外带的参数，注意是额外name="avatar"   //一看是不知道这个就是文件参数名称:headers="headers"><el-button size="small" type="primary">点击上传</el-button></el-upload>

methods: {handleRemove(file, fileList) {console.log(file, fileList);},handlePreview(file) {this.$message.warning(`,,,,,`);console.log(file);},handleExceed(files, fileList) {this.$message.warning(`最多选择一张图片`);},beforeRemove(file, fileList) {return this.$confirm(`确定移除 ${ file.name }？`);},beforeUpload(file) {//全部是多余操作，根本不用写这个函数/*this.headers = {"Content-Type": 'multipart/form-data'} this.avatarParamBody = {avatar: file,};console.log(this.avatarParamBody);console.log(this.headers);*/}

1.上传时，服务端没有接受到对应名称的参数。

弄了很久都没有解决，我就想着怎么就接受不到avatar作为文件参数名。

后来查了很多帖子才知道，有一个name属性对应的就是参数名，直接在组件里面写个name=“avatar”就可以，完全不用自己加参数。

2.第一次上传成功，第二次报错

原来这个发起上传请求会自动给加上清求头"Content-Type": 'multipart/form-data'

我在beforeUpload中加入了请求头，第一次没问题，但第二次就写了连个Content-Type参数，导致后端报错。

这么一来before-upload的函数就是多余的！！！除非有需要

Vue Element-ui上传图片踩坑相关推荐

element ui 组件踩坑记录--后台管理系统-最全
说明:很久没有开发过后台管理系统,elementui都好久没有用过了,踩了一些小坑,特意记录下: element 特点:a.组件的一般输入的值/可以选择的值,都是绑定在v-model 上面 b. 在组 ...
vue element ui 上传图片压缩
1:将压缩js封装起来 /** 图片压缩,默认同比例压缩* @param {Object} fileObj* 图片对象* 回调函数有一个参数,base64的字符串数据*/export functi ...
Vue+element ui上传图片和视频并回显，点击放大查看和播放
1.上传图片 html代码: <el-uploadaction="#":auto-upload="false":on-change="handl ...
elementui 上传七牛_用element ui上传图片到七牛踩过的坑
前端上传图片到七牛云的流程请求后端接口获取上传凭证请求七牛云地址上传图片到七牛云上传完毕将获得七牛云返回的图片地址七牛云地址说到七牛云地址,奴家真的是一把鼻涕一把泪刚开始做图片上传的时候, ...
vue+Element ui 实现照片墙
vue+Element ui 实现照片墙上面是我要实现的效果.直接上代码,间接明了 1.前端视图代码 <div><el-upload:file-list="fileLis ...
vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
Vue + Element UI 实现登陆注册基本demo实例
Vue + Element UI 实现权限管理系统前端篇(二):Vue + Element 案例导入项目打开 Visual Studio Code,File --> add Folder ...
【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架
[Vue 快速入门]从零开始搭建 VUE + Element UI后台管理系统框架前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条 ...
win10系统用户：如何获得超级管理员权限（vue开发之Win10踩坑）
作为win10系统的使用者Permission denied:cmd没权限.git没权限.npm没权限.delete文件夹也没权限.等等等:要权限没权限?或每次只给一次性权限?开发之痛,十指共愤! 如 ...