1. 图片上传组件构建

1.1 HTML结构

<template>
  <div>
    <input type="file" @change="handleFileChange" multiple>
    <div v-if="images.length">
      <div v-for="(image, index) in images" :key="index">
        <img :src="image.url" :alt="'Image ' + (index + 1)">
        <button @click="removeImage(index)">Remove</button>
      </div>
    </div>
  </div>
</template>

1.2 Vue.js 方法

<script>
export default {
  data() {
    return {
      images: []
    };
  },
  methods: {
    handleFileChange(event) {
      const files = event.target.files;
      for (let i = 0; i < files.length; i++) {
        const reader = new FileReader();
        reader.onload = (e) => {
          this.images.push({ url: e.target.result });
        };
        reader.readAsDataURL(files[i]);
      }
    },
    removeImage(index) {
      this.images.splice(index, 1);
    }
  }
};
</script>

2. 实时预览

3. 优化上传体验

为了优化上传体验，我们可以实现以下功能：

3.1 文件类型和大小验证

在用户选择文件之前，我们应该验证文件类型和大小。这可以通过检查accept属性和文件大小来实现。

<input type="file" accept="image/jpeg, image/png, image/gif" @change="handleFileChange" multiple>

3.2 上传进度反馈

axios.post('/upload', formData, {
  onUploadProgress: progressEvent => {
    const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    console.log(`Upload progress: ${percentCompleted}%`);
  }
})
.then(response => {
  console.log('Upload successful', response);
})
.catch(error => {
  console.error('Upload failed', error);
});

3.3 图片压缩

function compressImage(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = function(e) {
      const img = new Image();
      img.onload = function() {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = 800; // 设置压缩后的图片宽度
        canvas.height = (canvas.width * img.height) / img.width;
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        canvas.toBlob(blob => {
          resolve(blob);
        }, 'image/jpeg', 0.7); // 设置压缩质量
      };
      img.src = e.target.result;
    };
    reader.readAsDataURL(file);
  });
}

4. 总结