Vue3实现上传照片以及回显

最新推荐文章于 2024-08-27 08:17:11 发布

和烨

最新推荐文章于 2024-08-27 08:17:11 发布

阅读量2.2k

点赞数 8

分类专栏：前端文章标签： vue.js 前端

本文链接：https://blog.csdn.net/weixin_46146718/article/details/139167638

版权

前端专栏收录该内容

60 篇文章 3 订阅

订阅专栏

Vue3实现上传照片以及回显

一、安装Element Plus
二、案例
- 1、基本示例
三、进阶案例

一、安装Element Plus

使用 Element Plus 组件库来实现上传照片和回显同样很简单，你可以按照以下步骤进行：

安装 Element Plus：首先，确保你已经安装了 Element Plus。你可以在 Vue 3 项目中使用 npm 或 yarn 来安装 Element Plus：
```
npm install element-plus --save
```
或者
```
yarn add element-plus
```

引入 Element Plus：在你的 Vue 3 项目中的 main.js 文件中引入 Element Plus 并注册组件库中的组件：

import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

创建上传组件：在 Vue 3 中使用 Element Plus 的 Upload 组件来实现上传照片功能，同时使用 Image 组件来显示上传的照片。
处理文件上传：在上传组件中，可以使用 Upload 组件的 file-list 属性来绑定一个文件列表，当用户上传文件时，该列表会自动更新。你可以在 Image 组件中使用这个文件列表来显示上传的照片。

二、案例

1、基本示例

下面是一个简单的示例代码，演示了如何在 Vue 3 中使用 Element Plus 实现上传照片以及回显：

<template>
  <div>
    <el-upload
      action="#改为你上传服务URL路径" 
      :file-list="fileList"
      :on-change="handleFileUpload"
    >
      <el-button type="primary">点击上传</el-button>
    </el-upload>
    <el-image
      v-if="imageUrl"
      :src="imageUrl"
      style="width: 100px; height: 100px; margin-top: 10px;"
    ></el-image>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'PhotoUpload',
  setup() {
    const fileList = ref([]);
    const imageUrl = ref('');

    const handleFileUpload = (file, fileList) => {
      imageUrl.value = URL.createObjectURL(file.raw);
    };

    return {
      fileList,
      imageUrl,
      handleFileUpload
    };
  }
};
</script>

在这个示例中，我们使用了 Element Plus 的 Upload 组件来实现文件上传，通过绑定 file-list 属性来控制文件列表。在 handleFileUpload 方法中，我们监听 Upload 组件的 change 事件，获取上传的文件，并使用 URL.createObjectURL 方法生成一个临时的 URL，然后将其赋值给 imageUrl 数据，以在页面上显示照片。

三、进阶案例

1、代码

<template>
  <!-- 提交表单 -->
  <div>
      <el-form-item label="头像">
        <el-upload
          class="avatar-uploader"
          action="#改为你上传的文件路径"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :data="imageFormData"
          name="files"
          accept="image/*"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script  setup>
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import axios from "axios";


//提交表单数据
const formInline = ref({});
//照片
const imageUrl = ref("");
//上传图片表单
const imageFormData = ref({
  type: "picture",
});
//记录图片ID
const imageId = ref("");

const handleAvatarSuccess = (response, file) => {
  console.log("response=", response);
  console.log("file=", file);
  console.log("上传成功后的id=", response.data[0]);
  imageId.value = response.data[0];

  //回显图片
  getImage(imageId.value);
};

//调用图片
const getImage = async (id) => {
  //根据ID调用接口获取图片

  try {
    const imageInfo = await axios
      .get("#改为你调用文件服务的接口地址" + id, {
        responseType: "blob",
        headers: {
          Accept:
            "image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8",
        },
      })
      .then((response) => {
        const blob = new Blob([response.data], { type: "image/*" });
        imageUrl.value = URL.createObjectURL(blob);
      });
  } catch (error) {
    console.error("获取数据失败", error);
  }
};

//校验文件
const beforeAvatarUpload = (rawFile) => {
  if (!rawFile.type.startsWith("image/")) {
    ElMessage.error("请上传图片！");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error("图片大小不能超过2MB！");
    return false;
  }
  return true;
};

const onSubmit = () => {
  console.log("onSubmit");
};

</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}
.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #000;
  width: 100px;
  height: 100px;
  text-align: center;
}
.avatar-uploader .avatar {
  width: 100px;
  height: 100px;
}
</style>