vue+element-plus上传图片及回显问题及数量限制

让我详细讲解一下“vue+element-plus上传图片及回显问题及数量限制”的完整攻略。

1. 准备工作

在开始写代码之前，需要先准备好以下工具和库：

vue.js：一个流行的 JavaScript 框架，用于构建前端应用程序。
element-plus：一个基于 Element UI 的 Vue 3 组件库，提供了丰富的 UI 组件和样式。
axios：一个简单易用的 http 客户端，用于处理前后端之间的数据传输。

2. 实现图片上传

2.1 HTML 代码

首先，需要在 HTML 中添加一个文件上传的 input 标签，示例代码如下：

<el-upload
  class="upload-demo"
  :action="uploadUrl"
  :limit="10"
  :on-exceed="handleExceed"
  :headers="headers"
  :data="{uploadType: 'image'}"
  :on-success="handleSuccess"
  :file-list="fileList"
>
  <el-button size="small" type="primary">上传图片</el-button>
  <div slot="tip" class="el-upload__tip">上传图片数量不得超过 10 张</div>
</el-upload>

class="upload-demo"：设置样式，用于自定义样式；
:action="uploadUrl"：指定上传的接口地址；
:limit="10"：设置上传图片的最大数量为 10 张；
:on-exceed="handleExceed"：当上传图片数量超出限制时触发的函数；
:headers="headers"：设置请求头；
:data="{uploadType: 'image'}"：额外的上传参数；
:on-success="handleSuccess"：上传成功后的回调函数；
:file-list="fileList"：显示已上传的图片列表。

2.2 JavaScript 代码

然后，在 Vue 组件中实现上传图片的相关逻辑，示例代码如下：

import axios from 'axios'

export default {
  data () {
    return {
      fileList: [],  // 已上传的图片列表
      uploadUrl: '/api/upload/image',  // 上传图片的接口地址
      headers: {Authorization: 'Bearer ' + localStorage.getItem('token')}  // 请求头
    }
  },
  methods: {
    handleExceed (files, fileList) {
      this.$message.warning(`只能上传 ${this.limit} 张图片！`)
    },
    handleSuccess (response, file, fileList) {
      this.fileList.push({
        id: response.id,
        url: response.url
      })
      this.$message.success('图片上传成功！')
    }
  }
}

fileList: []：初始化一个空的图片列表；
uploadUrl: '/api/upload/image'：指定上传图片的接口地址；
headers: {Authorization: 'Bearer ' + localStorage.getItem('token')}：设置请求头；
handleExceed：当上传图片数量超出限制时触发的函数；
handleSuccess：上传成功后的回调函数；
id: response.id：将上传成功后返回的图片 ID 存储在图片列表中；
url: response.url：将上传成功后返回的图片 URL 存储在图片列表中。

3. 实现图片回显

3.1 HTML 代码

为了在页面中显示已上传的图片，需要添加一个图片列表，示例代码如下：

<el-image
  v-for="(item, index) in fileList"
  :key="item.id"
  :src="item.url"
  fit="contain"
  :preview-src-list="[item.url]"
  :lazy="false"
>
</el-image>

v-for="(item, index) in fileList"：遍历已上传的图片列表；
:key="item.id"：设置每个图片的唯一标识；
:src="item.url"：指定要显示图片的 URL；
fit="contain"：设置图片显示方式为自适应；
:preview-src-list="[item.url]"：设置图片预览列表；
:lazy="false"：关闭图片懒加载。

3.2 JavaScript 代码

为了在页面中显示已上传的图片，还需要在 Vue 组件中实现获取已上传的图片列表的接口，示例代码如下：

export default {
  data () {
    return {
      fileList: []  // 初始化一个空的图片列表
    }
  },
  mounted () {
    // 在组件挂载完成之后立即获取已上传的图片列表
    this.getFileList()
  },
  methods: {
    getFileList () {
      // 发送请求获取已上传的图片列表，并将返回的数据存储在 fileList 中
      axios.get('/api/upload/image/list').then(res => {
        this.fileList = res.data
      })
    }
  }
}

getFileList：定义获取已上传的图片列表的函数；
axios.get('/api/upload/image/list').then(res => { this.fileList = res.data })：发送请求获取已上传的图片列表，并将返回的数据存储在 fileList 中。

4. 图片数量限制

在 HTML 中的上传组件中，我们设置了图片上传的最大数量为 10 张，当用户上传的图片数量超出限制时，会触发 handleExceed 回调函数，示例代码如下：

handleExceed (files, fileList) {
  this.$message.warning(`只能上传 ${this.limit} 张图片！`)
}

在该函数中，我们可以使用 this.$message 方法弹出一个提示框，告知用户上传图片的数量超出限制。

同时，我们还可以在后端的图片上传接口中进行数量限制的验证，示例代码如下：

if (files.length > 10) {
  return res.status(400).json({ message: '只能上传 10 张图片！' })
}

这样，当用户上传的图片数量超出限制时，服务器会返回一个 HTTP 状态码为 400 的错误对象，并在错误对象中添加一个 message 属性，以向前端发送错误信息。

5. 示例演示

下面给出两个示例，分别演示了如何上传单张图片和批量上传多张图片。

5.1 示例1：上传单张图片

HTML 代码：

<template>
  <div>
    <h3>上传单张图片</h3>
    <el-upload
      class="upload-demo"
      :action="uploadUrl"
      :limit="1"
      :on-exceed="handleExceed"
      :headers="headers"
      :data="{uploadType: 'image'}"
      :on-success="handleSuccess"
      :file-list="fileList"
    >
      <el-button size="small" type="primary">上传图片</el-button>
      <div slot="tip" class="el-upload__tip">只能上传 1 张图片</div>
    </el-upload>
    <el-image
      :src="fileList[0] ? fileList[0].url : ''"
      fit="contain"
      :lazy="false"
    >
    </el-image>
  </div>
</template>

JavaScript 代码：

<script>
import axios from 'axios'

export default {
  data () {
    return {
      fileList: [],  // 已上传的图片列表
      uploadUrl: '/api/upload/image',  // 上传图片的接口地址
      headers: {Authorization: 'Bearer ' + localStorage.getItem('token')}  // 请求头
    }
  },
  methods: {
    handleExceed (files, fileList) {
      this.$message.warning(`只能上传 ${this.limit} 张图片！`)
    },
    handleSuccess (response, file, fileList) {
      this.fileList = [{
        id: response.id,
        url: response.url
      }]
      this.$message.success('图片上传成功！')
    }
  }
}
</script>

5.2 示例2：批量上传多张图片