以前做上传图片功能跟后端对接都是先把图片上传到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'
      }
*/

 

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐