vue2实现图片上传

在 Vue 2 中实现图片上传可以使用 HTML5 的 File API 和 FormData，以下是一个简单的示例：

1. 在 Vue 组件中，添加一个文件选择按钮和一个预览区域：

<template>
  <div>
    <input type="file" @change="handleFileSelect" multiple>
    <div v-for="image in images" :key="image.id">
      <img :src="image.url" alt="Preview">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: []
    };
  },
  methods: {
    handleFileSelect(event) {
      const files = event.target.files;
      this.uploadImages(files);
    },
    uploadImages(files) {
      const formData = new FormData();

      for (let i = 0; i < files.length; i++) {
        formData.append('images', files[i]);
      }

      // 发送 POST 请求到服务器
      // 你可以使用 axios 或者其他 HTTP 库发送请求
      // 以下是一个简单的示例：
      // axios.post('/upload', formData)
      //   .then(response => {
      //     // 处理上传成功后的逻辑
      //   })
      //   .catch(error => {
      //     // 处理上传失败后的逻辑
      //   });
      
      // 在这里省略了实际上传的HTTP请求代码，假设上传成功后会返回图片的URL
      // 这里只是模拟成功后的处理
      for (let i = 0; i < files.length; i++) {
        const imageURL = URL.createObjectURL(files[i]);
        this.images.push({
          id: i,
          url: imageURL
        });
      }
    }
  }
};
</script>

2. 以上示例中的代码会监听文件选择按钮的 `change` 事件，当用户选择了图片文件后，会调用 `handleFileSelect` 方法。在该方法中，创建一个 `FormData` 对象，并将选中的文件添加到其中。然后，你可以发送一个 POST 请求到服务器来上传图片，这里省略了实际的 HTTP 请求代码。为了预览已选择的图片，使用 `URL.createObjectURL` 方法创建一个临时的 URL，并将它们添加到 `images` 数组中用于渲染预览区域。

请注意，这只是一个简单的示例，实际的上传和预览逻辑可能会根据你的需求有所不同。