Vue.js实现动态添加和删除图片功能,提升前端交互体验

一、项目准备

首先,我们需要搭建一个基本的Vue项目。可以使用Vite来快速构建Vue项目。

    安装Vite和Vue

    npm init vite@latest my-vue-app -- --template vue
    cd my-vue-app
    npm install
    

    项目结构 项目的基本结构如下:

    my-vue-app/
    ├── index.html
    ├── src/
    │   ├── App.vue
    │   ├── main.js
    │   └── components/
    │       └── ImageGallery.vue
    ├── package.json
    └── ...
    

二、组件设计

  1. ImageGallery.vue “`vue

#### 三、功能实现

1. **图片展示**
   使用`v-for`指令遍历`images`数组,将每张图片渲染在`el-card`组件中。

2. **图片删除**
   为每张图片添加一个删除按钮,绑定点击事件`deleteImage`,通过图片的`id`来过滤掉要删除的图片。

3. **图片上传**
   使用`<input type="file">`元素来选择图片,通过`FileReader`将选中的图片转换为Base64格式,并添加到`images`数组中。

#### 四、优化与扩展

1. **加载动画**
   在图片上传过程中,可以添加加载动画,提升用户体验。
   ```vue
   <el-card v-loading="loading" class="image-card">
     <!-- ... -->
   </el-card>

data中添加loading状态,并在uploadImage方法中控制其值。

  1. uploadImage(event) {
     const file = event.target.files[0];
     if (file) {
       if (!['image/jpeg', 'image/png'].includes(file.type)) {
         alert('只支持JPEG和PNG格式的图片');
         return;
       }
       if (file.size > 1024 * 1024 * 2) {
         alert('图片大小不能超过2MB');
         return;
       }
       // ...后续处理
     }
    }
    
  2. methods: {
     async uploadImage(event) {
       const file = event.target.files[0];
       if (file) {
         const formData = new FormData();
         formData.append('image', file);
         try {
           const response = await axios.post('/api/upload', formData);
           this.images.push({ id: response.data.id, url: response.data.url });
         } catch (error) {
           console.error('上传失败', error);
         }
       }
     },
     async deleteImage(id) {
       try {
         await axios.delete(`/api/images/${id}`);
         this.images = this.images.filter(image => image.id !== id);
       } catch (error) {
         console.error('删除失败', error);
       }
     }
    }
    

五、总结

Vue.js的响应式系统和组件化开发模式,使得前端开发变得更加高效和灵活。希望本文能对你在Vue.js项目开发中有所帮助,激发更多的创意和灵感。