如何使用element ui 上传插件结合axios上传文件

Question

我现在开发模式是前后端分离
我把自动上传给设置为false，点击上传文件的时候上传图片

<el-form :model\="addClub" :rules\="rules" ref\="addClub" label-width\="110px" labelPosition\="left"\>  
 <el-form-item label\="社团头像"\>  
 <el-upload  class\="upload-demo"  
  ref\="upload"  
  action  
 multiple :limit\="1"  
  :on-exceed\="handleExceed"  
  :on-change\="beforeAvatarUpload"  
  :before-upload\="beforeUpload"  
  :file-list\="addClub.images"  
  :http-request\="uploadImg"  
  :auto-upload\="false"\>  
 <el-button slot\="trigger" size\="small" type\="primary"\>选取文件</el-button>  
 <div slot\="tip" class\="el-upload\_\_tip"\>只能上传jpg/png/jpeg图片，且不能超过5m</div>  
 </el-upload> </el-form-item>  
  
 <div :class\="$style.operation"\>  
 <button type\="button" :class\="$style.affirm" @click\="onSubmit('addClub')"\>提交</button>  
 <button :class\="$style.cancel"\>取消</button>  
 </div></el-form>

后台接口

Answer 1

在on-change时获取到上传文件fileList，点击提交时，根据保存的数据，将参数拼装成FormData格式,直接调用axios上传即可

Answer 2

element ui上传组件可以拿到value值不是一个file对象,你用formdata上传