vue实现上传封面

Vue 实现上传封面功能

使用原生 input 文件上传

在 Vue 中可以通过原生 HTML 的 input 元素实现文件上传功能。创建一个文件输入框，监听 change 事件获取用户选择的文件。

<template>
  <div>
    <input type="file" @change="handleFileUpload" accept="image/*">
    <button @click="uploadFile">上传封面</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedFile: null
    };
  },
  methods: {
    handleFileUpload(event) {
      this.selectedFile = event.target.files[0];
    },
    uploadFile() {
      if (!this.selectedFile) {
        alert('请选择文件');
        return;
      }
      const formData = new FormData();
      formData.append('file', this.selectedFile);
      // 调用上传 API
      axios.post('/api/upload', formData)
        .then(response => {
          console.log('上传成功', response.data);
        })
        .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="/api/upload"
      :multiple="false"
      :drop="true"
      accept="image/*"
      @input-file="onInputFile"
    >
      点击或拖拽上传封面
    </file-upload>
  </div>
</template>

<script>
import FileUpload from 'vue-upload-component';
export default {
  components: {
    FileUpload
  },
  data() {
    return {
      files: []
    };
  },
  methods: {
    onInputFile(newFile, oldFile) {
      if (newFile && !oldFile) {
        console.log('文件已选择', newFile);
      }
    }
  }
};
</script>

实现图片预览

上传前预览图片可以提升用户体验。通过 FileReader 读取文件并显示预览图。

<template>
  <div>
    <input type="file" @change="handleFileUpload" accept="image/*">
    <img v-if="imageUrl" :src="imageUrl" alt="封面预览" style="max-width: 200px;">
    <button @click="uploadFile">上传封面</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedFile: null,
      imageUrl: ''
    };
  },
  methods: {
    handleFileUpload(event) {
      this.selectedFile = event.target.files[0];
      if (this.selectedFile) {
        const reader = new FileReader();
        reader.onload = (e) => {
          this.imageUrl = e.target.result;
        };
        reader.readAsDataURL(this.selectedFile);
      }
    },
    uploadFile() {
      // 上传逻辑
    }
  }
};
</script>

上传进度显示

对于大文件上传，显示上传进度可以提升用户体验。使用 axios 的 onUploadProgress 回调实现进度显示。

<template>
  <div>
    <input type="file" @change="handleFileUpload" accept="image/*">
    <button @click="uploadFile">上传封面</button>
    <div v-if="uploadProgress > 0">
      上传进度: {{ uploadProgress }}%
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedFile: null,
      uploadProgress: 0
    };
  },
  methods: {
    handleFileUpload(event) {
      this.selectedFile = event.target.files[0];
    },
    uploadFile() {
      if (!this.selectedFile) {
        alert('请选择文件');
        return;
      }
      const formData = new FormData();
      formData.append('file', this.selectedFile);
      axios.post('/api/upload', formData, {
        onUploadProgress: progressEvent => {
          this.uploadProgress = Math.round(
            (progressEvent.loaded * 100) / progressEvent.total
          );
        }
      })
        .then(response => {
          console.log('上传成功', response.data);
          this.uploadProgress = 0;
        })
        .catch(error => {
          console.error('上传失败', error);
          this.uploadProgress = 0;
        });
    }
  }
};
</script>

文件类型和大小限制

在上传前校验文件类型和大小，避免无效上传。

<template>
  <div>
    <input type="file" @change="handleFileUpload" accept="image/*">
    <button @click="uploadFile">上传封面</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedFile: null
    };
  },
  methods: {
    handleFileUpload(event) {
      const file = event.target.files[0];
      if (!file) return;
      const validTypes = ['image/jpeg', 'image/png', 'image/gif'];
      const maxSize = 2 * 1024 * 1024; // 2MB
      if (!validTypes.includes(file.type)) {
        alert('仅支持 JPG, PNG, GIF 格式');
        return;
      }
      if (file.size > maxSize) {
        alert('文件大小不能超过 2MB');
        return;
      }
      this.selectedFile = file;
    },
    uploadFile() {
      // 上传逻辑
    }
  }
};
</script>

通过以上方法，可以在 Vue 中实现文件上传功能，包括预览、进度显示和文件校验，提升用户体验和功能完整性。