vue 实现 文件上传

使用 Vue 实现文件上传

基础文件上传实现

在 Vue 中实现文件上传可以通过原生 HTML 的 <input type="file"> 元素结合 Vue 的事件处理来完成。以下是一个基本的实现示例：

<template>
  <div>
    <input type="file" @change="handleFileUpload" />
    <button @click="uploadFile">上传文件</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      file: null
    };
  },
  methods: {
    handleFileUpload(event) {
      this.file = event.target.files[0];
    },
    uploadFile() {
      if (!this.file) {
        alert('请选择文件');
        return;
      }

      const formData = new FormData();
      formData.append('file', this.file);

      // 替换为你的上传 API 地址
      fetch('https://your-api-endpoint.com/upload', {
        method: 'POST',
        body: formData
      })
      .then(response => response.json())
      .then(data => {
        console.log('上传成功:', data);
      })
      .catch(error => {
        console.error('上传失败:', error);
      });
    }
  }
};
</script>

使用 Axios 进行文件上传

对于更复杂的应用，推荐使用 Axios 库来处理 HTTP 请求：

<template>
  <div>
    <input type="file" @change="handleFileUpload" />
    <button @click="uploadFile">上传文件</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      file: null
    };
  },
  methods: {
    handleFileUpload(event) {
      this.file = event.target.files[0];
    },
    async uploadFile() {
      if (!this.file) {
        alert('请选择文件');
        return;
      }

      const formData = new FormData();
      formData.append('file', this.file);

      try {
        const response = await axios.post('https://your-api-endpoint.com/upload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        });
        console.log('上传成功:', response.data);
      } catch (error) {
        console.error('上传失败:', error);
      }
    }
  }
};
</script>

添加进度显示

可以通过 Axios 的 onUploadProgress 回调来显示上传进度：

<template>
  <div>
    <input type="file" @change="handleFileUpload" />
    <button @click="uploadFile">上传文件</button>
    <div v-if="progress > 0">
      上传进度: {{ progress }}%
      <progress :value="progress" max="100"></progress>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      file: null,
      progress: 0
    };
  },
  methods: {
    handleFileUpload(event) {
      this.file = event.target.files[0];
      this.progress = 0;
    },
    async uploadFile() {
      if (!this.file) {
        alert('请选择文件');
        return;
      }

      const formData = new FormData();
      formData.append('file', this.file);

      try {
        const response = await axios.post('https://your-api-endpoint.com/upload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          },
          onUploadProgress: (progressEvent) => {
            this.progress = Math.round(
              (progressEvent.loaded * 100) / progressEvent.total
            );
          }
        });
        console.log('上传成功:', response.data);
      } catch (error) {
        console.error('上传失败:', error);
      }
    }
  }
};
</script>

多文件上传实现

如果需要支持多文件上传，可以修改 input 元素的 multiple 属性并调整处理方法：

<template>
  <div>
    <input type="file" multiple @change="handleFileUpload" />
    <button @click="uploadFiles">上传文件</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      files: []
    };
  },
  methods: {
    handleFileUpload(event) {
      this.files = Array.from(event.target.files);
    },
    async uploadFiles() {
      if (this.files.length === 0) {
        alert('请选择文件');
        return;
      }

      const formData = new FormData();
      this.files.forEach(file => {
        formData.append('files[]', file);
      });

      try {
        const response = await axios.post('https://your-api-endpoint.com/upload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        });
        console.log('上传成功:', response.data);
      } catch (error) {
        console.error('上传失败:', error);
      }
    }
  }
};
</script>

使用第三方组件

对于更复杂的需求，可以考虑使用专门的文件上传组件如 vue-dropzone 或 vue-upload-component。以 vue-upload-component 为例：

安装依赖：

npm install vue-upload-component

使用示例：

<template>
  <div>
    <file-upload
      ref="upload"
      v-model="files"
      post-action="https://your-api-endpoint.com/upload"
      @input-filter="inputFilter"
      @input-file="inputFile"
    >
      上传文件
    </file-upload>
    <button @click="upload">开始上传</button>
  </div>
</template>

<script>
import FileUpload from 'vue-upload-component';

export default {
  components: {
    FileUpload
  },
  data() {
    return {
      files: []
    };
  },
  methods: {
    inputFilter(newFile, oldFile, prevent) {
      if (newFile.size > 1024 * 1024 * 10) {
        return prevent();
      }
    },
    inputFile(newFile, oldFile) {
      console.log('文件变化:', newFile, oldFile);
    },
    upload() {
      this.$refs.upload.active = true;
    }
  }
};
</script>

这些方法涵盖了从基础到高级的文件上传实现，可以根据项目需求选择适合的方案。