vue3点击按钮实现文件携带参数一起上传

1、template部分：

由按钮和type=''file''的输入框组成，输入框设置display:none以到达隐藏的作用，点击按钮会触发输入框选择文件。

<div class="btn"><el-button type="primary" plain @click="selectFile">Upload</el-button></div>

<input type="file" ref="fileInput" style="display: none" @change="handleFileChange" accept=".json"/>

2、script部分：假设携带文件file和参数id进行上传

const fileInput = ref(null)

const file = ref(null)

const selectFile = () => {

    fileInput.value.click()     //点击按钮触发输入框选择文件

}

const handleFileChange = (e) => {    //当输入框选择文件后

    file.value = e.target.files[0]

    if (!file.value) return

    uploadFile(file)

}

const uploadFile = async (file) => {    //将输入框选择的文件和参数id一起添加进formData

    const formData = new FormData()

    formData.append('file', file.value) //file.value是上传的文件

    formData.append('id', id) //id是要携带的参数

   await importTemplate(formData) //发送请求进行上传，importTemplate()是封装好的请求方法

}