实现在线图片上传到本地然后回显的步骤详解

前端

2023-12-17 13:00:00

使用 Element-UI 实现图片上传和回显

简介

在 Web 开发中，图片上传是一个常见任务，它使我们能够收集和存储用户提供的图片。在本教程中，我们将探讨如何使用 Element-UI 中强大的 up-load 组件来轻松实现图片上传和在本地回显。

Element-UI up-load 组件

Element-UI 是一个流行的 Vue.js UI 库，它提供了广泛的组件来构建现代 Web 应用程序。up-load 组件专门用于管理文件上传，并提供各种配置选项以满足您的特定需求。

图片上传到本地并回显

要使用 up-load 组件进行图片上传，我们需要按照以下步骤操作：

安装 Element-UI： 通过 NPM 或 Yarn 安装 Element-UI 库到您的项目中。
引入 up-load 组件： 在您的 Vue 组件中，通过 import 语句导入 up-load 组件。
创建 up-load 组件实例： 在您的 Vue 组件中，创建一个 up-load 组件实例并设置以下属性：
- action：指定上传请求的目标 URL。
- multiple：允许用户选择多个文件。
- accept：指定允许上传的文件类型。
- before-upload：在文件上传之前触发的函数。
处理上传事件： 监听 up-load 组件的 on-change 事件，并在文件上传成功时处理响应。
回显图片路径： 将上传的图片路径存储在 Vue 数据中，以便在页面上回显图片。

拦截器

为了处理图片上传的响应并拦截图片路径，我们可以使用 Vue 拦截器。拦截器是一种机制，它允许我们在请求和响应到达最终目标之前对其进行修改。

FileUtil.imgsrc

FileUtil.imgsrc 是一个变量，用于存储上传的图片路径。通过拦截器，我们可以将上传响应中的图片路径替换为 FileUtil.imgsrc。

UUID

UUID（通用唯一标识符）是一种随机生成的唯一 ID。我们可以使用 UUID 为上传的图片生成新的文件名。

新文件名

新文件名是原始文件名与 UUID 的组合。通过这种方式，我们确保在上传过程中不会覆盖现有文件。

代码示例

以下是一个 Vue 组件的代码示例，演示了如何使用 up-load 组件实现图片上传和回显：

<template>
  <el-upload
    :action="uploadUrl"
    multiple
    :accept="['image/*']"
    @change="handleUpload"
  >
    <el-button>上传图片</el-button>
  </el-upload>
  <img v-if="imageUrl" :src="imageUrl" alt="Uploaded Image">
</template>

<script>
import { ref } from 'vue'
import { useHttp } from '@/composables/useHttp'
import { FileUtil } from '@/utils/fileUtil'

export default {
  setup() {
    const imageUrl = ref(null)
    const { createInterceptor } = useHttp()

    const handleUpload = (file, fileList) => {
      const formData = new FormData()
      formData.append('file', file)
      createInterceptor({
        name: 'handleUpload',
        onSuccess: ({ data }) => {
          FileUtil.imgsrc = data.imageUrl
        }
      })
      // 发送文件上传请求
    }

    return {
      imageUrl,
      handleUpload
    }
  }
}
</script>