封装带参数的文件上传组件

有这么一个需求，就是我们要给员工设置业绩和目标，但是我们已经在本地的表格里面设置好了，现在需要导入到系统里面，如果一个一个的输入，有点太费劲了，所以做了一个导入的功能，这个需求有如下功能：
1.可以选择年份，某一年的目标
2.可以选择目标，是那一条目标的业绩
3.要上传表格，同步数据用
这就是一个不仅需要上传文件，在上传文件的同时，还需要携带参数。
平时我们做的只是一个上传文件的功能，但是这次我们多了参数，怎么做呢？下面我们来一步步实现

首先我们跟平常一样，写一个隐藏的输入框，这个输入框的type类型是file类型

<input id="importInputFile" type="file" @change="uploadFile">

然后我们写页面要展示的上传文件的样式，如下图

image.png

代码如下：

<el-input v-model="file.name" :disabled="true" />
<el-button type="primary" @click="selectFile">
    选择文件
</el-button>

其中input框是我们要展示的上传文件的名称，按钮是我们点击进行选择文件的。
然后我们写好上传的参数的样式：

image.png

代码如下：

<span>目标：&nbsp;&nbsp;&nbsp;</span>
<el-select v-model="targetId" filterable :placeholder="请选择" size="mini" style="width: 159px !important; margin-right: 10px">
    <el-option v-for="item in targetList" :key="item.id" :value="item.id" :label="item.ruleName" size="mini">{{ item.ruleName }}</el-option>
</el-select>
<span>年份&nbsp;&nbsp;&nbsp;</span>
<el-date-picker type="year" placeholder="选择年" v-model="dateYear" value-format="yyyy" />

这些样式我们都写好之后，开始写功能了。
先写选择文件的功能：

selectFile() {
    document.getElementById('importInputFile').click()
},
uploadFile(event) {
    var files = event.target.files
    const file = files[0]
    this.file = file   //把选择的文件信息，记录到file中
    event.target.value = ''  //这里要清空的原因是要解决第二次无法选择同样的文件的问题。
},

这时候我们已经选择好文件了，下一步就是选择目标和年份，这步是在页面上进行操作的，这里不在叙述。
然后我们已经选择完成了，要进行下一步点击确认进行上传了，在这一步需要注意的是，同时进行上传文件和传参。
在这里要看我们的后端的接收参数的方式，如果是根文件是同级的传参方式是下面这种：

updateFile(result) {
    let file = JSON.parse(JSON.stringify(this.file))
    let formData = new FormData();
    formData.append("file", this.file);
    importTargetValue({
        params: {
            targetId: this.targetId,
            dateYear: this.dateYear,
        },
        formData: formData
    }).then(res => 
            console.log(res)
    }).catch((err) => {
           console.log(err)
    })
}

如果传参方式是放在文件内部接收的，那传参方式是这种：

updateFile() {
    let file = JSON.parse(JSON.stringify(this.file))
    let formData = new FormData();
    formData.append("file", this.file);  //要上传的 文件数据
    //要上传的 其他参数
    formData.append("targetId", this.targetId);
    formData.append("dateYear", this.dateYear);
    importTargetValue({
        formData
    }).then(res => 
            console.log(res)
    }).catch((err) => {
           console.log(err)
    })
}

这里着重介绍下第二种方式，这种方式是在form对象里面直接追加的，我们可以直接在form对象里面进行追加其他参数，使用append方法追加即可，这里需要注意的是如果我们要传的某个参数是一个对象，formdata的append会把一般的对象转成字符串，所以我们得提前使用JSON.stringify进行json字符串的转换，例如：

formData.append("obj",JSON.stringify(this.obj))

到这里我们就完成了整个文件附带参数的上传方法，
我们在点击确定上传按钮的时候，处理完其他逻辑，直接调用updateFile方法即可。