vue上传图片设置headers表头信息

<el-form-item label="icon图标" prop="icon">

  <span><img :src="ruleForm.icon_url" min-width="70" height="70" />

    class="avatar-uploader"

    action

    name="file1"

    :data="{index:1}"//传递参数

    :show-file-list="false"

    :http-request="uploadFileUrl" ><div class="upload-btn">上传

</el-form-item>

//上传图片

uploadFileUrl(file){

var fileIndex=file.data.index

  //console.log("=========",file.data.index)

  let formData =new FormData()

formData.append("file", file.file)

/**上传图片接口*/

  const instance =Axios.create({

baseURL:"http://216.118.XXX.50:8082",//服务器地址

    timeout:10000,

    headers:{'Content-Type':'multipart/form-data',"auth":sessionStorage.getItem("token"),"uid":sessionStorage.getItem("uid_ciphertext")},

    method:'POST',

    data:formData

})

instance({url:"/api/v1/admins/games/images/upload"}).then((data) =>{

// console.log(JSON.stringify(data))

      this.ruleForm.icon_url=data.data.data.icon_url

})

},

需求：

1、不同类型的表头来回切换需要动态v-for渲染表头，如（[北京、上海、广州、深圳]，[大众、丰田、日产、本田]，[小型车、紧凑型、中型车、中大型]），表头内容全部由后端传递，每组内容不固定；

2、一级表头下还需要嵌套两个二级表头（如销量、增长率）；

3、增长率正为红色，负为绿色；

4、列表产生横向滚动条时，时间一列固定在最左侧。

1、template

2、script

prop 表格字段，label表格字段名 , tableHead表头数据（这里很重要哈）

最后就可以出现那个效果了哈～ 效果图如下：

直接复制就可以用，要是有问题可以直接私信哈

---