如何利用element-ui上传图片/当上传图片需要参数，需要请求头的时候应该如何上传

当图片的上传需要请求头或者一系列参数的时候，怎么上传
下面我们简单说明一下

后端的请求格式

post：'/avatar'，
请求数据类型：application/x-www-form-urlencoded，
参数名称: avatarType file name
参数说明:(0:comment 1:member 2:others)
请求类型: query
是否必须：true
且上传图片还需上传请求头

首先我们引入按需element-ui中我们需要的组件

 <el-form :label-position="labelPosition" label-width="80px" :model="formInline">
          <el-form-item label="图片名称">
              
            <el-input v-model="formInline.name"></el-input>
          </el-form-item>
          <el-form-item label="type">
            <el-select v-model="formInline.avatarType" placeholder="图片类型">
              <el-option label="comment" value="0"></el-option>
              <el-option label="member" value="1"></el-option>
              <el-option label="others" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-form>

并在script内定义需要的数据

    data() {
      return {
        head:'',
        data:{
          head:'',
        },
        labelPosition:'right',
        formInline:{
          name:'',
          avatarType:''
        },
        show:false
      }
    },

引入element-ui需要上传图片的组件并设置内容

    <el-upload
      class="upload-demo"
      drag  //是否开启图片拖拽
      :headers="head" //假如后端需要请求头，那么就用headers来进行接收，然后上传
      action="这里书写上传图片的地址"
      name='file' //这里的name是你要上传的文件类型，也可以说是上传的文件字段名
      :data="formInline" //data是上传时附带的额外参数 相当于就是你需要传递的参数 就是这个data
      multiple
      v-show="show">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    </el-upload>

在created里面将请求头传入

    created(){
      this.head = {
            token: sessionStorage.getItem('token')
          }
    }

凭借这一系列的处理，就能够将图片上传。

当然，如果后端给的参数少，那么你需要设置的东西也会很少。