vue中实现图片上传

使用 input 元素和 FileReader 实现图片上传

在 Vue 中创建一个文件输入元素，监听 change 事件获取用户选择的图片文件。通过 FileReader 将图片转换为 Base64 或 ArrayBuffer 格式。

<template>
  <div>
    <input type="file" @change="handleFileUpload" accept="image/*" />
    <img v-if="imageUrl" :src="imageUrl" alt="Uploaded Image" />
  </div>
</template>

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

使用 axios 上传图片到服务器

将图片文件通过 FormData 对象包装后，使用 axios 发送到服务器端。

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

    try {
      const response = await axios.post('/api/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      });
      console.log('Upload success:', response.data);
    } catch (error) {
      console.error('Upload failed:', error);
    }
  }
}

使用第三方库 vue-upload-component

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

安装依赖：

npm install vue-upload-component

使用示例：

<template>
  <file-upload
    :extensions="['jpg', 'png', 'gif']"
    :post-action="'/api/upload'"
    @input-file="onFileChange"
  ></file-upload>
</template>

<script>
import FileUpload from 'vue-upload-component';
export default {
  components: {
    FileUpload
  },
  methods: {
    onFileChange(file) {
      if (file) {
        console.log('Selected file:', file);
      }
    }
  }
};
</script>

图片预览和压缩处理

在上传前可以对图片进行预览和压缩处理，优化用户体验和服务器负载。

methods: {
  compressImage(file) {
    return new Promise((resolve) => {
      const reader = new FileReader();
      reader.onload = (event) => {
        const img = new Image();
        img.onload = () => {
          const canvas = document.createElement('canvas');
          const ctx = canvas.getContext('2d');
          const MAX_WIDTH = 800;
          const MAX_HEIGHT = 600;
          let width = img.width;
          let height = img.height;

          if (width > height) {
            if (width > MAX_WIDTH) {
              height *= MAX_WIDTH / width;
              width = MAX_WIDTH;
            }
          } else {
            if (height > MAX_HEIGHT) {
              width *= MAX_HEIGHT / height;
              height = MAX_HEIGHT;
            }
          }

          canvas.width = width;
          canvas.height = height;
          ctx.drawImage(img, 0, 0, width, height);
          canvas.toBlob(resolve, 'image/jpeg', 0.7);
        };
        img.src = event.target.result;
      };
      reader.readAsDataURL(file);
    });
  }
}

多图片上传实现

通过循环处理多个文件，实现批量上传功能。

methods: {
  async handleMultipleUpload(event) {
    const files = Array.from(event.target.files);
    const uploadPromises = files.map(file => this.uploadImage(file));

    try {
      await Promise.all(uploadPromises);
      console.log('All files uploaded successfully');
    } catch (error) {
      console.error('Some files failed to upload', error);
    }
  }
}