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
100
18
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:18 天前 )
9e887079 [skip ci] 11 个月前
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

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐