vue2项目b-form-file标签内选择确定了文件就执行某函数怎么写

你可以使用`@change`事件监听文件选择的变化，然后在事件处理函数中调用你想要执行的函数。具体代码如下：

<template>
  <b-form-file @change="handleFileChange"></b-form-file>
</template>

<script>
export default {
  methods: {
    handleFileChange(files) {
      // 在这里调用你想要执行的函数
      console.log(files)
    }
  }
}
</script>

在上面的代码中，`@change`监听了文件选择的变化，当文件选择确定后，会触发`handleFileChange`函数。在`handleFileChange`函数中，你可以执行你想要的操作，这里我只是简单地打印了选择的文件信息。

相关问题

生成vue前端页面附件将文件拖到此处，或点击上传序号文件名称请上传文件文件大小操作取消确认 <el-col :xs="24" :sm="24" :lg="24"> <el-form-item label="附件"> <el-upload v-if="crud.status.cu > 0" ref="fileUpload" :link-name="linkName" style="width: 100%;" action="/your-upload-url" :auto-upload="false" :file-list="fileList" :on-change="handleFileChange" > <el-button size="small" type="primary">选择文件</el-button> </el-upload> </el-form-item> </el-col>

这是一个基于Vue的前端页面中的文件上传组件。它使用了Element UI中的el-upload组件来实现文件上传功能。以下是组件的代码：

<template>
  <el-col :xs="24" :sm="24" :lg="24">
    <el-form-item label="附件">
      <el-upload
        v-if="crud.status.cu > 0"
        ref="fileUpload"
        :link-name="linkName"
        style="width: 100%;"
        action="/your-upload-url"
        :auto-upload="false"
        :file-list="fileList"
        :on-change="handleFileChange"
      >
        <el-button size="small" type="primary">选择文件</el-button>
      </el-upload>
    </el-form-item>
  </el-col>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
    };
  },
  methods: {
    handleFileChange(file) {
      // 处理文件选择事件
    },
  },
};
</script>

在这个组件中，使用了`el-upload`组件来渲染文件上传按钮和文件列表。其中`action`属性指定了文件上传的接口地址，`auto-upload`属性设置为`false`表示需要手动触发上传动作。`file-list`属性用于绑定文件列表数据，`on-change`属性绑定了文件选择事件的处理函数`handleFileChange`。

希望以上信息对你有帮助！如果还有其他问题，请随时提问。

vue3+element-plus调用接口 实现文件上传

好的，关于这个问题，你需要先在你的项目中安装 element-plus 和 axios 这两个库，然后按照以下步骤来实现文件上传：

1. 在组件中导入要使用的库：

import { defineComponent } from 'vue'
import { ElUpload } from 'element-plus'
import axios from 'axios'

2. 创建上传函数，并将 formData 发送至服务器：

export default defineComponent({
  components: { ElUpload },
  methods: {
    uploadFile(file) {
      const formData = new FormData()
      formData.append('file', file.raw)

      axios.post('/upload', formData, {
        headers: { 'Content-Type': 'multipart/form-data' }
      })
      .then(response => {
        console.log(response.data);
      })
    }
  }
})

3. 在模板中引入上传组件：

<template>
  <el-upload
    class="upload-demo"
    :action="uploadFile"
    list-type="picture"
    :on-success="onSuccess"
    :on-change="onChange"
    :before-upload="beforeUpload"
  >
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>

4. 最后，通过 on-success 回调函数来处理服务器返回的上传成功信息：

export default defineComponent({
  components: { ElUpload },
  methods: {
    uploadFile(file) {
      const formData = new FormData()
      formData.append('file', file.raw)

      axios.post('/upload', formData, {
        headers: { 'Content-Type': 'multipart/form-data' }
      })
      .then(response => {
        console.log(response.data);
      })
    },
    onSuccess(response, file, fileList) {
      console.log('上传成功');
      console.log(response);
      console.log(file);
      console.log(fileList);
    }
  }
})

希望这个回答能够帮到你！