【前端Vue】如何实现全局操作按钮（文件上传）

全局上传：

点击全局上传按钮时或点击其他页面的上传按钮时，将更新呼出上传功能子组件，子组件按特定的路径进行上传，上传使用获取到并显示出来的路径，使用$refs和vuex及store进行传值更新，$refs负责父子组件传值，后者负责更新视图及数据。

按钮示意图

上传页面（含路径）示意图

采用以下方法进行传值，父组件一点击按钮就进行传值操作。

此处以fileUploadSteps.userBasePathStep传递userBasePath为例子，其他的父组件传递也是一样的

  methods: {

    ...mapActions('fileUpload', ['toggleFileUpload', 'updateFilePath']),

    openFileUpload() {

      getPath().then(response => {

        console.log('获取路径成功:', response.data);

        this.userBasePath = response.data.userPath || '';

        this.updateFilePath(this.userBasePath);

        this.toggleFileUpload(true); // 先显示 drawer

        this.$nextTick(() => { // 确保 drawer 显示后再访问子组件

          if (this.$refs.fileUploadSteps && this.$refs.fileUploadSteps.userBasePathStep) {

            this.$refs.fileUploadSteps.userBasePathStep(this.userBasePath);

          } else {

            console.error('FileUpload 组件未正确挂载');

          }

          console.log('全局文件上传路径：', this.userBasePath);

        });

      }).catch(error => {

        console.error('获取路径失败:', error);

      });

    },

上传菜单可见性及ref绑定

<el-button type="primary" icon="el-icon-upload" circle class="upload-button" size="normal" @click="openFileUpload" />

      </el-tooltip>

      <el-drawer

        title="上传任务"

        :visible.sync="fileUploadVisible"

        :with-header="true"

        append-to-body

      >

        <FileUpload ref="fileUploadSteps" />

      </el-drawer>

文件上传子组件接收方接受数据并更新视图。

使用 Vuex 的 mapState 和 mapActions 来访问和修改 store 中的状态。

computed: {

    ...mapState('fileUpload', ['uploadFileList', 'filePath']),

    fileUploadPath: {

      get() {

        return this.filePath;

      },

      set(value) {

        this.updateFilePath(value);

      }

    }

  },

  watch: {

    absolutePath: {

      handler(newValue, oldValue) {

        console.log('absolutePath changed:', newValue, 'oldValue:', oldValue);

        this.absolutePathStep(newValue);

      },

      deep: true,

      immediate: true,

    },

    filePath: {

      handler(newValue, oldValue) {

        console.log('filePath changed:', newValue, 'oldValue:', oldValue);

        this.filePathStep(newValue);

      },

      deep: true,

      immediate: true,

    },

    userBasePath: {

      handler(newValue, oldValue) {

        console.log('userBasePath changed:', newValue, 'oldValue:', oldValue);

        this.userBasePathStep(newValue);

      },

      deep: true,

      immediate: true,

    },

  },

  methods: {

    ...mapActions('fileUpload', ['removeUploadFile', 'updateFilePath']),

    removeUploadFile(index) {

      this.$store.dispatch('fileUpload/removeUploadFile', index);

    },

    userBasePathStep(userBasePath) {

      this.fileUploadPath = userBasePath;

    },

    absolutePathStep(absolutePath) {

      this.fileUploadPath = absolutePath;

    },

    filePathStep(filePath) {

      this.fileUploadPath = filePath;

    },

上传组件路径显示

<span>{{ fileUploadPath }}</span>

使用vuex的全局配置文件，用于全局传输或保存数据。uploadFileList: []可以用于全局存储下载列表，removeUploadFile是用于取消上传时删除上传任务的。

export default {

  namespaced: true,

  state: {

    fileUploadVisible: false,

    filePath: '',

    uploadFileList: []

  },

  mutations: {

    setFileUploadVisible(state, visible) {

      state.fileUploadVisible = visible;

    },

    setFilePath(state, path) {

      state.filePath = path;

    },

    removeUploadFile(state, index) {

      state.uploadFileList.splice(index, 1);

    }

  },

  actions: {

    toggleFileUpload({ commit }, visible) {

      commit('setFileUploadVisible', visible);

    },

    updateFilePath({ commit }, path) {

      commit('setFilePath', path);

    },

    removeUploadFile({ commit }, index) {

      commit('removeUploadFile', index);

    }

  }

};

位于store文件夹下