vue实现添加图片

使用 v-model 和 <input type="file"> 实现图片上传

在 Vue 中可以通过 <input type="file"> 结合 v-model 或 @change 事件来实现图片上传功能。创建一个文件输入框，并通过事件处理获取用户选择的图片文件。

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

<script>
export default {
  data() {
    return {
      imageUrl: null,
    };
  },
  methods: {
    handleFileUpload(event) {
      const file = event.target.files[0];
      if (file) {
        this.imageUrl = URL.createObjectURL(file);
      }
    },
  },
};
</script>

使用 axios 上传图片到服务器

如果需要将图片上传到后端服务器，可以使用 axios 发送 FormData 对象。这种方式适用于 REST API 或自定义后端接口。

<template>
  <div>
    <input type="file" @change="handleFileUpload" accept="image/*" />
    <button @click="uploadImage">Upload</button>
    <img v-if="imageUrl" :src="imageUrl" alt="Uploaded Image" style="max-width: 300px;" />
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      selectedFile: null,
      imageUrl: null,
    };
  },
  methods: {
    handleFileUpload(event) {
      this.selectedFile = event.target.files[0];
      this.imageUrl = URL.createObjectURL(this.selectedFile);
    },
    async uploadImage() {
      if (!this.selectedFile) return;

      const formData = new FormData();
      formData.append('image', this.selectedFile);

      try {
        const response = await axios.post('https://your-api-endpoint.com/upload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data',
          },
        });
        console.log('Upload successful:', response.data);
      } catch (error) {
        console.error('Upload failed:', error);
      }
    },
  },
};
</script>

使用第三方库（如 vue-dropzone）实现拖拽上传

对于更高级的上传功能（如拖拽上传、多文件上传），可以使用第三方库如 vue-dropzone。

安装依赖：

npm install vue2-dropzone

示例代码：

<template>
  <div>
    <vue-dropzone
      ref="myVueDropzone"
      id="dropzone"
      :options="dropzoneOptions"
      @vdropzone-success="uploadSuccess"
    ></vue-dropzone>
  </div>
</template>

<script>
import vue2Dropzone from 'vue2-dropzone';
import 'vue2-dropzone/dist/vue2Dropzone.min.css';

export default {
  components: {
    vueDropzone: vue2Dropzone,
  },
  data() {
    return {
      dropzoneOptions: {
        url: 'https://your-api-endpoint.com/upload',
        thumbnailWidth: 150,
        maxFilesize: 2, // MB
        acceptedFiles: 'image/*',
        addRemoveLinks: true,
      },
    };
  },
  methods: {
    uploadSuccess(file, response) {
      console.log('File uploaded successfully:', response);
    },
  },
};
</script>

图片预览与本地存储

如果仅需在本地预览图片而不上传到服务器，可以使用 URL.createObjectURL() 生成临时 URL。这种方式适合前端处理，但不会持久化存储图片。

<template>
  <div>
    <input type="file" @change="previewImage" accept="image/*" />
    <img v-if="previewUrl" :src="previewUrl" alt="Preview" style="max-width: 300px;" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      previewUrl: null,
    };
  },
  methods: {
    previewImage(event) {
      const file = event.target.files[0];
      if (file) {
        this.previewUrl = URL.createObjectURL(file);
      }
    },
  },
  beforeUnmount() {
    if (this.previewUrl) {
      URL.revokeObjectURL(this.previewUrl); // 释放内存
    }
  },
};
</script>

表单提交时包含图片

如果图片是表单的一部分，可以在提交表单时将图片数据包含在 FormData 中。

<template>
  <div>
    <form @submit.prevent="submitForm">
      <input type="text" v-model="formData.name" placeholder="Name" />
      <input type="file" @change="handleFileUpload" accept="image/*" />
      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      formData: {
        name: '',
        image: null,
      },
    };
  },
  methods: {
    handleFileUpload(event) {
      this.formData.image = event.target.files[0];
    },
    async submitForm() {
      const formData = new FormData();
      formData.append('name', this.formData.name);
      formData.append('image', this.formData.image);

      try {
        const response = await axios.post('https://your-api-endpoint.com/submit', formData);
        console.log('Form submitted:', response.data);
      } catch (error) {
        console.error('Submission failed:', error);
      }
    },
  },
};
</script>