Vue3图片选择攻略：轻松实现图片上传与预览技巧

1. 创建Vue3项目

首先，确保你已经安装了Vue3。如果没有，可以通过以下命令进行安装：

npm install -g @vue/cli
vue create my-image-upload-project

进入项目目录并启动开发服务器：

cd my-image-upload-project
npm run serve

2. 设计图片上传组件

2.1 创建组件结构

在src/components目录下创建一个新的Vue组件文件ImageUploader.vue。

<template>
  <div class="image-uploader">
    <input type="file" @change="handleFiles" multiple>
    <div v-for="(file, index) in files" :key="index" class="image-preview">
      <img :src="file.preview" alt="Image Preview">
      <button @click="removeFile(index)">Remove</button>
    </div>
  </div>
</template>

2.2 编写组件逻辑

在ImageUploader.vue的<script>标签中，添加以下代码：

<script>
import { ref } from 'vue';

export default {
  setup() {
    const files = ref([]);

    const handleFiles = (event) => {
      const selectedFiles = event.target.files;
      for (let i = 0; i < selectedFiles.length; i++) {
        const reader = new FileReader();
        reader.onload = (e) => {
          files.value.push({
            preview: e.target.result,
            file: selectedFiles[i],
          });
        };
        reader.readAsDataURL(selectedFiles[i]);
      }
    };

    const removeFile = (index) => {
      files.value.splice(index, 1);
    };

    return { files, handleFiles, removeFile };
  },
};
</script>

2.3 添加样式

在<style>标签中添加以下CSS样式：

<style>
.image-uploader {
  margin: 20px;
}

.image-preview {
  margin-top: 10px;
}

.image-preview img {
  width: 100px;
  height: auto;
}

button {
  margin-top: 5px;
}
</style>

3. 使用图片上传组件

在你的父组件中，你可以这样使用ImageUploader.vue组件：

<template>
  <div>
    <ImageUploader @uploaded="handleUpload" />
  </div>
</template>

<script>
import ImageUploader from './components/ImageUploader.vue';

export default {
  components: {
    ImageUploader,
  },
  methods: {
    handleUpload(files) {
      // 处理上传逻辑
      console.log('Files uploaded:', files);
    },
  },
};
</script>

4. 实现图片上传功能

import axios from 'axios';

methods: {
  async handleUpload(files) {
    const formData = new FormData();
    for (let i = 0; i < files.length; i++) {
      formData.append('files', files[i].file);
    }
    try {
      const response = await axios.post('your-upload-url', formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      });
      console.log('Upload successful:', response.data);
    } catch (error) {
      console.error('Upload failed:', error);
    }
  },
},

5. 总结