vue element上传插件的坑

最近做了一个项目，里面需要上传图片，用element搞了半天采了好多坑，特记录下来，也帮前端小伙伴们早日脱坑，废话不多说，直接上一个极简的例子，剖析接口配置、修改文件名、额外传参，亲测有效哈

例子讲解-html

<el-upload
    action="/api/file/uploadImg" //上传接口：不要写全的会跨域，这样写就可以了
    list-type="picture-card"
    name="imgFile"  //配置为后台指定的文件参数名
    :data='uploadData' //上传时附带的额外参数
    >
    <i class="el-icon-plus"></i>
</el-upload>

弃坑之路

* 上传接口配置
  例（长金宝）：http://xxxxxx.com/api/file/uploadImg
  action: 上传接口不要写完整的，那样会跨域，这样写就可以，/api在config中配置过会被代理不会跨域

* 参数配置
  例：{uploadType: 'creditApply', imgFile: 'xxxxsss'}
  需要这样配置：
  <el-upload
    name="imgFile"  //重点
    :data='uploadData'
    >
  // js
    uploadData={uploadType: 'creditApply'}
    

完整例子-极简版

html

<el-upload
    action="/api/file/uploadImg" 
    list-type="picture-card"
    name="imgFile"  
    :data='uploadData' 
    >
    <i class="el-icon-plus"></i>
</el-upload>

js

  export default {
    data() {
      return {
        uploadData:{
          uploadType: 'creditApply',
        },
      }
    },
    methods: {}
  }