vue实现上传按钮

Vue 实现上传按钮的方法

使用原生 HTML input 和 Vue 处理

通过 HTML 的 input 元素结合 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
      axios.post('/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(response => {
        console.log('上传成功', response);
      }).catch(error => {
        console.error('上传失败', error);
      });
    }
  }
};
</script>

使用第三方库 vue-upload-component

对于更复杂的需求，可以使用专门的上传组件库如 vue-upload-component。

安装依赖：

npm install vue-upload-component

使用示例：

<template>
  <div>
    <file-upload
      ref="upload"
      v-model="files"
      post-action="/upload"
      :multiple="true"
      @input-filter="inputFilter"
    >
      选择文件
    </file-upload>
    <button @click="$refs.upload.active = true">开始上传</button>
  </div>
</template>

<script>
import FileUpload from 'vue-upload-component';
export default {
  components: {
    FileUpload
  },
  data() {
    return {
      files: []
    };
  },
  methods: {
    inputFilter(newFile, oldFile, prevent) {
      if (newFile && !oldFile) {
        // 过滤文件类型或大小
        if (!/\.(jpeg|jpg|png)$/i.test(newFile.name)) {
          return prevent();
        }
      }
    }
  }
};
</script>

自定义上传按钮样式

通过隐藏原生 input 元素并自定义按钮样式来提升用户体验。

<template>
  <div>
    <label class="custom-upload-btn">
      选择文件
      <input type="file" @change="handleFileUpload" style="display: none;" />
    </label>
    <button @click="uploadFile">上传</button>
  </div>
</template>

<style>
.custom-upload-btn {
  display: inline-block;
  padding: 8px 16px;
  background-color: #4CAF50;
  color: white;
  border-radius: 4px;
  cursor: pointer;
}
.custom-upload-btn:hover {
  background-color: #45a049;
}
</style>

拖拽上传实现

添加拖拽区域来支持拖放文件上传。

<template>
  <div 
    @dragover.prevent="dragover" 
    @dragleave.prevent="dragleave" 
    @drop.prevent="drop"
    :class="{ 'drag-active': isDragActive }"
    class="upload-area"
  >
    拖放文件到此处或点击选择文件
    <input type="file" @change="handleFileUpload" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDragActive: false,
      file: null
    };
  },
  methods: {
    dragover() {
      this.isDragActive = true;
    },
    dragleave() {
      this.isDragActive = false;
    },
    drop(event) {
      this.isDragActive = false;
      this.file = event.dataTransfer.files[0];
      this.uploadFile();
    },
    // 其他方法同上
  }
};
</script>

<style>
.upload-area {
  border: 2px dashed #ccc;
  padding: 20px;
  text-align: center;
}
.drag-active {
  border-color: #4CAF50;
  background-color: #f0fff0;
}
</style>

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