Vue轻松上手：照片上传攻略，告别图片上传难题！

简介

环境准备

在开始之前，请确保您已经安装了 Node.js 和 npm，并且熟悉 Vue.js 的基本概念。以下是一个简单的 Vue 项目搭建流程：

# 安装 Vue CLI
npm install -g @vue/cli

# 创建一个新项目
vue create photo-upload-app

# 进入项目目录
cd photo-upload-app

# 运行项目
npm run serve

图片上传组件

<template>
  <div>
    <input type="file" @change="handleFileChange" />
    <img :src="previewImage" alt="Image Preview" v-if="previewImage" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      file: null,
      previewImage: null,
    };
  },
  methods: {
    handleFileChange(event) {
      const file = event.target.files[0];
      if (!file) return;

      this.file = file;
      const reader = new FileReader();
      reader.onload = (e) => {
        this.previewImage = e.target.result;
      };
      reader.readAsDataURL(file);
    },
  },
};
</script>

图片上传到服务器

import axios from 'axios';

methods: {
  uploadImage() {
    const formData = new FormData();
    formData.append('image', this.file);

    axios.post('https://yourserver.com/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    })
    .then(response => {
      console.log('Image uploaded successfully:', response.data);
    })
    .catch(error => {
      console.error('Image upload failed:', error);
    });
  },
},

图片上传优化

methods: {
  compressImage(file, quality) {
    const reader = new FileReader();
    reader.onload = (e) => {
      const img = new Image();
      img.onload = () => {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        canvas.toBlob((blob) => {
          const compressedFile = new File([blob], file.name, {
            type: file.type,
            lastModified: Date.now(),
          });
          this.file = compressedFile;
          this.uploadImage();
        }, file.type, quality);
      };
      img.src = e.target.result;
    };
    reader.readAsDataURL(file);
  },
},

总结