Vue 上传照片要求 Content-Type 为 multipart/form-data

HTML是这样的

<el-uploadref="options"action="#":limit="1":http-request="requestUpload":show-file-list="false":before-upload="beforeUpload"><el-button size="small">选择<i class="el-icon-upload el-icon--right"></i></el-button>
</el-upload>
<el-buttonstyle="float: right"type="primary"size="small"@click="uploadImg()">提 交</el-button
>

JS是这样的

// 上传预处理beforeUpload(file) {if (file.type.indexOf("image/") == -1) {this.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");} else {const reader = new FileReader();reader.readAsDataURL(file);reader.onload = () => {this.options.img = reader.result;this.file_name = file;};}},// 上传图片uploadImg() {if (this.file_name) {let fileFormData = new FormData();fileFormData.append("file",this.file_name);//append是追加或者新增的意思，里面的参数以键值对的形式 照片名=>照片就可以了carousel(fileFormData).then((response) => {console.log(response);if (response.code == 200) {this.open = false;this.$emit('byval' , response.data);}else{this.msgError(response.msg);}});} else {this.msgError("请上传图片类型,如：JPG，PNG后缀的文件");}},

其实上面这样就可以了，不过要是想改变Content-Type

// 上传预处理beforeUpload(file) {if (file.type.indexOf("image/") == -1) {this.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");} else {const reader = new FileReader();reader.readAsDataURL(file);reader.onload = () => {this.options.img = reader.result;this.file_name = file;};}},// 上传图片uploadImg() {if (this.file_name) {let fileFormData = new FormData();fileFormData.append("file",this.file_name);let requestConfig = {headers: {"Content-Type": "multipart/form-data",},};carousel(fileFormData,requestConfig).then((response) => {if (response.code == 200) {this.open = false;this.$emit('byval' , response.data);}else{this.msgError(response.msg);}});} else {this.msgError("请上传图片类型,如：JPG，PNG后缀的文件");}},

封装的接口是这样的

export function carousel(data，item) {return request({url: '我是接口',Headers:item,method: 'post',data: data})
}

原文

Vue 上传照片要求 Content-Type 为 multipart/form-data相关推荐

上传文件.HttpMediaTypeNotSupportedException:Content type ‘multipart/form-data；
org.springframework.web.HttpMediaTypeNotSupportedException:Content type 'multipart/form-data;boundar ...
python form表单上传服务器文件_如何使用multipart/form POST将文件上传到需要上载的文件的URL（chunks）...
是否有机会通过API端点上传文件,该端点将多部分/表单数据作为只有该文件URL的内容类型?在规则: 将整个文件下载到内存中,然后由这个端点上传不是一个选项(不能保证这个盒子会足够大来容纳一个临时文件 ...
YDOOK: Sanic: Python request post请求上传照片或文件详细具体步骤亲测可用！
YDOOK: Sanic: Python request post请求上传照片或文件详细具体步骤亲测可用! ©YDOOK JYLin 1. 项目目录架构: Upload result: 上传结果 ...
SSM+BJUI实现以Base64方式上传照片
场景点击添加--选择照片--点击保存--保存到数据库路径--页面展示. 实现前面实现照片上传可以用其他实现,这里是用BJUI来实现. 需要给后台action传过去base64Str. 添加页面代码 ...
手机端上传照片实现压缩、拖放、缩放、裁剪、合成拼图等功能
一.序如题,最近工作中遇到一个移动端用户上传照片,然后在线编辑,添加一些别的图片合成的功能,类似于超级简化版美图秀秀.总结了一下,大致操作包含上传图片,图片压缩.触摸拖动图片.放大/缩小.添加别的 ...
vue前端实现上传文件,vue 上传文件
以ASP.NET Core WebAPI 作后端 API ,用 Vue 构建前端页面,用 Axios 从前端访问后端 API ,包括文件的上传和下载. 准备文件上传的API #region 文件上传 ...
vue 上传文件和下载文件
Vue上传文件,不必使用什么element 的uplaod, 也不用什么npm上找的个人写的包,就用原生的Vue加axios就行了, 废话不多说,直接上代码: html: <input type ...
exif.js解决ios手机上传照片后显示为旋转90度问题（兼容ios13.4之前的版本）
exif.js解决ios手机上传照片后显示为旋转90度问题(兼容ios13.4 ) 问题描述: 在做手机移动端app时,发现iOS12.5.1版本(iphone6)上传照片出现顺时针旋转90问题,ip ...
使用axios上传照片
原来使用vue1.0的时候,我们一直使用ajax来发送请求,当接触新的项目的时候,我们使用了vue2.0,结合着使用了axios来代替ajax. 安装axios的话: 1-利用npm安装npm ins ...

Vue 上传照片要求 Content-Type 为 multipart/form-data

Vue 上传照片要求 Content-Type 为 multipart/form-data相关推荐

最新文章

热门文章