iview upload组件 action和headers的使用

贵公司出现一个需求 需上传附件 本人用的iview组件 恰巧里面有一upload组件 但出现一个问题 我的接口都是封装过的 导致不知道如何在action里面写自己的接口地址 如果你也遇到像我一样的问题 见下文

<Upload v-model="caseForm.enclosure" :headers='{"userName": userName}' multiple type="drag" :action="actionUrl" style="width:300px;">
   <div>
       <Icon type="ios-cloud-upload" size="50" style="color: #3399ff"></Icon>
       <p>单击或拖动文件到此处上传</p>
   </div>
</Upload>

请求头
因为我调用的接口都需要前端返回给后端一个请求头 恰巧upload组件有 ：headers这个属性 里面的userName我设置成了变量 具体是一个getCookie的操作

userName:getCookie('userName')

action
接下来就是action里放接口了 具体如下（注：这里踩得一个大坑 iview官网 action前面没有冒号 然后我死命测试 action地址总不对 后来在action前面加冒号就好了 具体原因不详 懂得人评论区见）

actionUrl:'' //初始化

我写在mouted里面 因为我有本地、测试、生产三个环境 固封装了请求地址 引用它们加process.env.API_ROOT这句就好了

mounted:function(){
    // 上传附件接口
     this.actionUrl=process.env.API_ROOT+'/sme/file/uploadFileTest'
 }