Vue路由传参实现可复用上传组件的技术方案咨询

Got it, let's clean up that redundant code and make your upload component reusable by passing the upload type through Vue Router links. Here's a step-by-step breakdown to implement this:

Step 1: Update Router Links to Pass Upload Type #

First, modify your router-link elements to include the upload type as a query parameter. This tells the upload component exactly what type of files to accept when the user navigates to it:

<router-link to="/uploadFile?type=image" tag="a" class="btn navbar-btn"> Upload Image </router-link>
<router-link to="/uploadFile?type=pdf" tag="a" class="btn navbar-btn"> Upload PDF </router-link>
<router-link to="/uploadFile?type=text" tag="a" class="btn navbar-btn"> Upload Text </router-link>

Step 2: Refactor the Upload Component #

Next, we'll eliminate the redundant uploader sections by defining a configuration map for each upload type, then dynamically load the correct settings based on the router parameter.

Updated Template #

Remove the old <select> and duplicate <uploader> blocks, replacing them with a single, dynamic uploader component:

<template>
  <div>
    <!-- No more dropdown - we get the type from the router -->
    <div class="form-group" v-if="currentConfig">
      <uploader 
        :options="options" 
        ref="uploader" 
        @file-success="fileSuccess" 
        @file-error="fileError"
      >
        <uploader-drop>
          <uploader-btn 
            :attrs="{ accept: currentConfig.accept }" 
            :single="currentConfig.single"
          >
            select files
          </uploader-btn>
        </uploader-drop>
      </uploader>
    </div>
  </div>
</template>

Updated Script #

Replace your component script with this refactored version, which uses a config map and router parameter handling:

<script>
import uploader from 'vue-simple-uploader' 

export default {
  components: { uploader }, // Don't forget to register the component!
  data() {
    return {
      options: { target: 'upload' },
      // Define a map of upload types to their configurations
      uploadConfig: {
        image: { accept: '.jpg', single: true },
        pdf: { accept: '.pdf', single: false }, // single=false allows multiple files
        text: { accept: '.txt', single: true }
      },
      currentConfig: {}
    }
  },
  created() {
    // Initialize config based on router query on component load
    this.setUploadConfig(this.$route.query.type)
  },
  watch: {
    // Update config if the router query changes (e.g., user edits the URL directly)
    '$route.query.type'(newType) {
      this.setUploadConfig(newType)
    }
  },
  methods: {
    setUploadConfig(type) {
      // Fallback to image type if invalid/undefined type is passed
      this.currentConfig = this.uploadConfig[type] || this.uploadConfig.image
    },
    fileSuccess(rootFile, file, message) {
      console.log(message)
    },
    fileError(rootFile, file, message) {
      console.log(message)
    }
  }
}
</script>

Key Improvements #

• Eliminated Redundancy: A single uploader component replaces three duplicate blocks, making the code easier to maintain.
• Dynamic Adaptability: The component automatically adjusts accepted file types and multi-select behavior based on the router parameter.
• Scalability: Adding a new upload type only requires adding a new entry to the uploadConfig object and a corresponding router link.
• Robustness: Includes fallback logic to handle invalid or missing type parameters gracefully.

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