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()是封装好的请求方法
}
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐


所有评论(0)