上传图片并显示#Vue3#后端接口数据

上传图片并显示#Vue3#后端接口数据

效果：

代码：

<!-- 上传图片并显示 -->
<template><!-- 上传图片start --><div><el-form><el-form-item><el-uploadmultipleclass="avatar-uploader"action="":http-request="uploadFile1"list-type="picture":show-file-list="false"><img v-if="imageUrl" class="avatar" :src="imageUrl" /><el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon></el-upload></el-form-item></el-form></div><!-- 上传图片end -->
</template><script setup lang="ts">
import { Plus } from "@element-plus/icons-vue";
import { ref } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";
import { ElNotification } from "element-plus";const router = useRouter();
console.log(router.currentRoute.value.path); //当前路由路径
sessionStorage.setItem("path", router.currentRoute.value.path);// 定义表单
let tableForm = ref({file: "",
});
const imageUrl = ref("");
// 上传并显示图片
const uploadFile1 = async (val: any) => {tableForm.value.file = val.file;console.log("tableForm", tableForm);// 数据交互let formdata = new FormData();formdata.append("File", tableForm.value.file);// 上传文件await axios.post("http://192.168.1.214:5050/api/File/UploadFile", formdata, {headers: { "Content-Type": "multipart/form-data" },}).then((res) => {console.log("res.data", res.data);console.log("res.data.data.id", res.data.data.id);// 找到文件路径axios.post("http://192.168.1.214:5050/api/File/FilePathInfo", {id: res.data.data.id,}).then((result) => {console.log("result.data.data.filePath", result.data.data.filePath);let path = "http://192.168.1.214:5050" + result.data.data.filePath;console.log("path", path);imageUrl.value = path;});if (res.data.status === 200) {ElNotification({title: "上传成功",message: "上传成功",duration: 2000,type: "success",});}});
};
</script><style scoped lang="scss">
// 上传图片
.avatar-uploader .avatar {width: 200px;height: 200px;display: block;
}
.avatar-uploader {width: 200px;height: 200px;border: 1px dashed var(--el-border-color);border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;transition: var(--el-transition-duration-fast);
}
.avatar-uploader:hover {border-color: var(--el-color-primary);
}
.el-icon {font-size: 20px;color: #8c939d;width: 200px;height: 200px;text-align: center;
}
</style>