Vue和UpLoad怎么实现上传预览和删除图片

发布时间：2022-02-21 09:34:17 作者：iii
来源：亿速云阅读：704

# Vue和UpLoad怎么实现上传预览和删除图片

## 前言

在现代Web开发中，文件上传功能是许多应用的核心需求之一。特别是图片上传场景，往往需要实现预览、删除等交互功能。本文将详细介绍如何基于Vue.js框架配合常用上传库（如Element UI的Upload组件或axios原生实现），构建完整的图片上传、预览和删除功能。

---

## 一、技术选型与准备

### 1.1 基础框架
- **Vue 2.x/3.x**：本文示例兼容两个版本
- **UI组件库**（可选）：
  - Element UI（Vue 2）
  - Element Plus（Vue 3）
  - Ant Design Vue

### 1.2 上传方案
1. **原生`<input type="file">`**
2. **第三方库**：
   - `axios`：直接处理文件上传
   - `vue-upload-component`：专用上传组件
   - UI库内置Upload组件（推荐）

---

## 二、基于Element UI的实现方案

### 2.1 组件安装与引入

```bash
npm install element-ui  # Vue 2
# 或
npm install element-plus # Vue 3

import { ElUpload, ElButton, ElIcon } from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

export default {
  components: {
    ElUpload,
    ElButton,
    ElIcon
  }
}

2.2 基础上传组件配置

<el-upload
  action="/api/upload"  <!-- 上传接口地址 -->
  list-type="picture-card"  <!-- 卡片式预览 -->
  :on-preview="handlePreview"  <!-- 预览回调 -->
  :on-remove="handleRemove"  <!-- 删除回调 -->
  :file-list="fileList">  <!-- 已上传文件列表 -->
  <i class="el-icon-plus"></i>
</el-upload>

2.3 JavaScript逻辑实现

export default {
  data() {
    return {
      fileList: [], // 存储已上传文件
      dialogImageUrl: '', // 预览图片URL
      dialogVisible: false // 预览对话框状态
    }
  },
  methods: {
    // 预览处理
    handlePreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 删除处理
    handleRemove(file, fileList) {
      this.fileList = fileList
      // 可在此调用API删除服务器文件
      this.$axios.delete(`/api/files/${file.uid}`)
    },
    // 上传成功处理
    handleSuccess(response, file, fileList) {
      this.fileList = fileList
    }
  }
}

2.4 样式优化（可选）

/* 限制上传区域大小 */
.el-upload-list--picture-card .el-upload-list__item {
  width: 120px;
  height: 120px;
}
/* 预览对话框样式 */
.el-dialog__body img {
  max-width: 100%;
}

三、原生实现方案（不依赖UI库）

3.1 模板结构

<template>
  <div class="upload-container">
    <input 
      type="file" 
      ref="fileInput" 
      @change="handleFileChange" 
      accept="image/*" 
      multiple
    >
    <div class="preview-list">
      <div v-for="(file, index) in previewFiles" :key="index" class="preview-item">
        <img :src="file.previewUrl" />
        <button @click="removeFile(index)">删除</button>
      </div>
    </div>
  </div>
</template>

3.2 核心逻辑实现

export default {
  data() {
    return {
      previewFiles: [] // 包含previewUrl和原始file对象
    }
  },
  methods: {
    // 文件选择处理
    handleFileChange(e) {
      const files = Array.from(e.target.files)
      files.forEach(file => {
        if (!file.type.match('image.*')) return
        
        const reader = new FileReader()
        reader.onload = (e) => {
          this.previewFiles.push({
            file,
            previewUrl: e.target.result
          })
        }
        reader.readAsDataURL(file)
      })
    },
    
    // 删除文件
    removeFile(index) {
      this.previewFiles.splice(index, 1)
    },
    
    // 实际上传
    async uploadFiles() {
      const formData = new FormData()
      this.previewFiles.forEach(item => {
        formData.append('files[]', item.file)
      })
      
      try {
        const res = await axios.post('/api/upload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        })
        console.log('上传成功', res.data)
      } catch (err) {
        console.error('上传失败', err)
      }
    }
  }
}

四、高级功能扩展

4.1 文件限制与验证

// 在el-upload中添加
:before-upload="beforeUpload"

methods: {
  beforeUpload(file) {
    const isJPG = file.type === 'image/jpeg'
    const isLt2M = file.size / 1024 / 1024 < 2
    
    if (!isJPG) {
      this.$message.error('只能上传JPEG格式!')
    }
    if (!isLt2M) {
      this.$message.error('图片大小不能超过2MB!')
    }
    
    return isJPG && isLt2M
  }
}

4.2 拖拽上传实现

<el-upload
  drag
  action="/api/upload"
  :multiple="true">
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
</el-upload>

4.3 分片上传（大文件处理）

// 使用vue-upload-component示例
import Uploader from 'vue-upload-component'

export default {
  components: {
    Uploader
  },
  data() {
    return {
      options: {
        target: '/api/upload',
        chunkSize: 2 * 1024 * 1024, // 2MB分片
        testChunks: true
      }
    }
  }
}

五、服务端配合建议

5.1 基本响应格式

{
  "success": true,
  "url": "/uploads/2023/abc.jpg",
  "uid": "unique-file-id"
}

5.2 Node.js示例（Express）

const multer = require('multer')
const upload = multer({ dest: 'uploads/' })

app.post('/api/upload', upload.single('file'), (req, res) => {
  res.json({
    success: true,
    url: `/uploads/${req.file.filename}`
  })
})

六、常见问题解决方案

6.1 预览图片旋转问题

使用exif-js检测并修正方向：

import EXIF from 'exif-js'

function correctImageOrientation(file, callback) {
  EXIF.getData(file, function() {
    const orientation = EXIF.getTag(this, 'Orientation')
    // 根据orientation值进行旋转修正
  })
}

6.2 跨域上传配置

确保服务器配置CORS：

// Express示例
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*')
  next()
})

6.3 进度显示

利用axios的onUploadProgress：

axios.post('/upload', formData, {
  onUploadProgress: progressEvent => {
    const percent = Math.round(
      (progressEvent.loaded * 100) / progressEvent.total
    )
    console.log(`${percent}%`)
  }
})

结语

本文详细介绍了Vue项目中实现图片上传、预览和删除的多种方案。无论是使用现成的UI组件还是原生实现，核心思路都是： 1. 获取文件对象 2. 生成预览（FileReader） 3. 处理上传（FormData） 4. 维护文件列表状态

根据项目需求选择合适方案，并注意用户体验细节（如文件验证、进度反馈等），就能构建出完善的图片上传功能。 “`

该文章共计约2100字，包含： - 6个主要章节 - 15+个代码示例 - 覆盖UI库和原生两种实现方案 - 包含高级功能扩展和常见问题解决 - 采用标准的Markdown格式