vue input上传组件如何修改按钮和输入框文字

要修改Vue input上传组件的按钮和输入框文字，可以通过自定义组件来实现。下面是一个示例代码：

<template>
  <div>
    <label :for="inputId">{{ label }}</label>
    <div class="custom-file">
      <input type="file" :id="inputId" class="custom-file-input" @change="onFileChange" :accept="accept" :multiple="multiple">
      <label :for="inputId" class="custom-file-label">{{ buttonText }}</label>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    inputId: {
      type: String,
      default: 'file-input'
    },
    label: {
      type: String,
      default: 'Choose file'
    },
    accept: {
      type: String,
      default: ''
    },
    multiple: {
      type: Boolean,
      default: false
    },
    buttonText: {
      type: String,
      default: 'Browse'
    }
  },
  methods: {
    onFileChange(e) {
      // 处理文件上传逻辑
    }
  }
}
</script>

<style>
.custom-file-input::-webkit-file-upload-button {
  visibility: hidden;
}
.custom-file-input::before {
  content: '{{ buttonText }}';
  display: inline-block;
  background: #007bff;
  color: #fff;
  border-radius: 5px;
  padding: 8px 20px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  font-weight: 400;
  margin-right: 10px;
}
.custom-file-input:hover::before {
  background: #0069d9;
}
.custom-file-input:active::before {
  background: #0062cc;
}
.custom-file-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
</style>

这个组件可以通过 `inputId` 属性来指定文件输入框的 `id`，通过 `label` 属性来指定标签文字，通过 `accept` 属性来指定文件类型，通过 `multiple` 属性来指定是否允许多选，通过 `buttonText` 属性来指定按钮文字。

在样式中，通过 `::before` 伪类来修改按钮样式，通过 `.custom-file-label` 类来修改输入框文字样式。