vue+element-ui中 使用multipart上传文件
以前做上传图片功能跟后端对接都是先把图片上传到oss ,然后把返回的url传给后端,这次后端说要传给他文件流的格式,要用'multipart/form-data'方式。 以前从来没做过,网上查资料,然后自己折腾了好久,踩了不少坑,终于做出来了, 特此记录一下。<!-- 使用elements-ui的上传组件 --><template><el-uploa...
·
以前做上传图片功能跟后端对接都是先把图片上传到oss ,然后把返回的url传给后端,这次后端说要传给他文件流的格式,要用'multipart/form-data'方式。 以前从来没做过,网上查资料,然后自己折腾了好久,踩了不少坑,终于做出来了, 特此记录一下。
<!-- 使用elements-ui的上传组件 -->
<template>
<el-upload
class="upload-demo"
ref="upload"
action="/"
:on-change="uploadFile"
:auto-upload="false"
:show-file-list="false">
<el-button slot="trigger" size="small" type="primary">上传图片</el-button>
<div slot="tip" class="el-upload__tip">请上传JPG、JPEG、PNG,大小不超过2M</div>
</el-upload>
<el-button @click.native="submitForm" type="primary">提交</el-button>
</template>
上传方法
uploadFile(file) {
this.imgUrl = file.raw // 拿到文件的信息
},
最后提交的时候需要注意下,要把格式转为 FormData 格式
还有请求头需要设置为 multipart/form-data
submitForm() {
let formdata = new FormData()
formdata.append(imgUrl, this.imgUrl)
api.submit(formdata )// ...这边就是提交给后台的api了
}
/* 请求头
headers: {
'Content-Type': 'multipart/form-data'
}
*/
更多推荐
已为社区贡献8条内容
所有评论(0)