Vue实战揭秘：如何轻松实现input元素中的图片上传功能

1. HTML结构搭建

<div>
  <input type="file" id="uploadImage" @change="handleImageChange" accept="image/*" />
  <div v-if="imageUrl">
    <img :src="imageUrl" alt="Uploaded Image" style="max-width: 300px; max-height: 300px;" />
  </div>
</div>

2. Vue数据绑定

data() {
  return {
    imageUrl: ''
  };
}

3. 处理文件选择事件

methods: {
  handleImageChange(event) {
    const file = event.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        this.imageUrl = e.target.result;
      };
      reader.readAsDataURL(file);
    }
  }
}

这段代码创建了一个FileReader对象，它会在读取文件内容时触发onload事件。当文件读取完成时，result属性包含了文件的DataURL，这个URL可以被用来设置img标签的src属性。

4. 图片预览

5. 表单提交

methods: {
  // ...其他方法

  uploadImage() {
    const formData = new FormData();
    formData.append('image', this.$refs.uploadImage.files[0]);

    // 使用axios发送请求
    axios.post('/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
    .then(response => {
      console.log('图片上传成功', response);
    })
    .catch(error => {
      console.error('图片上传失败', error);
    });
  }
}

在这个方法中，我们创建了一个FormData对象，并将用户选择的文件添加到它中。然后，我们使用axios库（需要先安装）来发送一个POST请求到服务器。

6. 总结