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()是封装好的请求方法

}

GitHub 加速计划 / vu / vue
108
18
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
9e887079 [skip ci] 1 年前
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐