要实现这个功能,你需要使用 Vue3 和一个可用的上传组件。以下是一个基本的示例:

  1. 安装依赖
npm install vue@next
npm install axios
npm install vue3-upload-component
  1. 创建一个 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

vscode vue3 button点击上传获取文件

原文地址: https://www.cveoy.top/t/topic/cJlV 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录