当前位置：首页 > news >正文

Vue3实现上传照片以及回显

news 来源：原创 2024/7/1 9:14:26

Vue3实现上传照片以及回显

一、安装Element Plus
二、案例
- 1、基本示例
三、进阶案例
- 1、代码
- 2、代码解释
- - 1、上传接口展示
  - 2、查询接口展示
  - 组件属性
- 3、效果展示

一、安装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-uploadaction="#改为你上传服务URL路径" :file-list="fileList":on-change="handleFileUpload"><el-button type="primary">点击上传</el-button></el-upload><el-imagev-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-uploadclass="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>