Vue 3中选择文件后如何激活Bootstrap模态框？

你的问题核心在于Bootstrap 5的模态框不能通过直接点击元素触发，必须使用它提供的JavaScript API来控制显示/隐藏。之前的document.getElementById("showModal").click()方法无效，因为模态框的显示逻辑是由Bootstrap的Modal实例管理的，原生click事件无法触发其内部逻辑。

具体修复步骤： #

1. 初始化Bootstrap模态框实例
   在Vue组件的mounted钩子中，通过ref获取模态框元素并创建Modal实例，后续直接调用实例方法控制模态框。

2. 修正文件处理逻辑
   <input type="file">的files属性是只读的，无需将e.target.files赋值给this.$refs.file.files，直接使用e.target.files即可。

3. 调用模态框的show方法
   在文件选择完成的onChange方法中，调用Modal实例的show()方法弹出预览模态框。

修改后的完整代码： #

模板部分

<input type="file" multiple name="file" id="fileInput" class="hidden-input" @change="onChange"
       ref="file" accept=".pdf,.jpg,.jpeg,.png" hidden />
<button type="button" @click="chooseFiles()" class="btn btn-link text-decoration-none emoji-btn"
       id="emoji-btn">
   <i class="las la-arrow-up align-middle"></i>
</button>

<!-- 模态框部分 -->
<div ref="modal" class="modal fade" tabindex="-1" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-body">
        <div v-for="file in files" :key="file.name" class="preview-card border rounded">
          <div class="d-flex align-items-center p-2">
            <b-img v-if="file.type !== 'application/pdf'" class="img-thumbnail me-2" alt="200x200" width="200"
              :src="generateURL(file)" data-holder-rendered="true" />
            <iframe v-else class="img-thumbnail me-2" data-holder-rendered="true" frameBorder="0" scrolling="no"
              alt="200x200" width="200" :src="generateURL(file)" />
            <div class="flex-grow-1">
              <div class="pt-1">
                <h5 class="fs-11 mb-1" data-dz-name="">
                  {{ file.name }}
                </h5>
                <p class="fs-9 text-muted mb-0" data-dz-size="">
                  <strong>{{ (file.size / 1024 / 1024).toFixed(2) }}</strong> MB
                </p>
                <strong class="error text-danger" data-dz-errormessage=""></strong>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <b-button type="button" class="btn btn-danger" data-bs-dismiss="modal">
          退出
        </b-button>
      </div>
    </div>
  </div>
</div>

脚本部分

export default {
  data() {
    return {
      files: [],
      modalInstance: null
    }
  },
  mounted() {
    // 初始化Bootstrap模态框实例
    this.modalInstance = new bootstrap.Modal(this.$refs.modal)
  },
  methods: {
    chooseFiles() {
      document.getElementById("fileInput").click()
    },
    onChange(e) {
      // 直接使用e.target.files，无需赋值给ref的files（只读属性）
      this.files = [...e.target.files]
      this.fileSize(e)
      // 调用模态框显示方法
      this.modalInstance.show()
    },
    generateURL(file) {
      return URL.createObjectURL(file)
    },
    fileSize(e) {
      // 你的文件大小处理逻辑
    }
  },
  beforeUnmount() {
    // 销毁模态框实例，避免内存泄漏
    if (this.modalInstance) {
      this.modalInstance.dispose()
    }
  }
}

额外注意事项： #

• 组件销毁时调用dispose()方法销毁模态框实例，防止内存泄漏。
• 文件大小计算修正为file.size / 1024 / 1024（1MB=1024*1024字节），用toFixed(2)保留两位小数提升显示友好度。
• 确保已正确引入Bootstrap 5的JS文件，否则无法创建Modal实例。

内容的提问来源于stack exchange，提问作者drc_s2000