vscode vue3 button点击上传获取文件
要实现这个功能,你需要使用 Vue3 和一个可用的上传组件。以下是一个基本的示例:
- 安装依赖
npm install vue@next
npm install axios
npm install vue3-upload-component
- 创建一个 Vue3 组件
<template>
<div>
<input type="file" ref="fileInput" style="display: none" @change="onFileChange" />
<vue-upload-component
:url="uploadUrl"
:auto-upload="false"
:headers="{ Authorization: 'Bearer ' + token }"
:show-upload-button="false"
@input="onFileSelected"
/>
<button @click="triggerFileInput">选择文件</button>
<button @click="uploadFile">上传文件</button>
</div>
</template>
<script>
import { defineComponent, ref } from 'vue'
import axios from 'axios'
export default defineComponent({
name: 'UploadButton',
components: {
VueUploadComponent: () => import('vue3-upload-component'),
},
setup() {
const fileInput = ref(null)
const uploadUrl = 'https://example.com/upload'
const token = 'your_token_here'
const selectedFile = ref(null)
const triggerFileInput = () => {
fileInput.value.click()
}
const onFileChange = (event) => {
selectedFile.value = event.target.files[0]
}
const onFileSelected = (file) => {
selectedFile.value = file
}
const uploadFile = async () => {
const formData = new FormData()
formData.append('file', selectedFile.value)
try {
const response = await axios.post(uploadUrl, formData, {
headers: {
'Content-Type': 'multipart/form-data',
Authorization: 'Bearer ' + token,
},
})
console.log(response.data)
} catch (error) {
console.error(error)
}
}
return {
fileInput,
uploadUrl,
token,
selectedFile,
triggerFileInput,
onFileChange,
onFileSelected,
uploadFile,
}
},
})
</script>
这个组件包含一个隐藏的文件输入框、一个上传组件、一个选择文件的按钮和一个上传文件的按钮。当用户点击选择文件按钮时,会触发文件输入框的点击事件,然后用户可以选择要上传的文件。选定后,文件会显示在上传组件中,并且可以通过点击上传文件按钮来上传它。
注意,这里使用了 axios 库来进行文件上传。你需要将 uploadUrl 和 token 替换成你自己的值。同时,你需要在后端实现一个接受文件上传的 API
原文地址: https://www.cveoy.top/t/topic/cJlV 著作权归作者所有。请勿转载和采集!