创建getImage方法

app/src/App.vue

@@ -548,7 +548,7 @@ const importFromJson = () => {
 //从服务器获取模板
 const importFromJsonServer = async (itemId) => {
   try {
-    const url = new URL(process.env.TEMPLATE_API_URL+'template');
+    const url = new URL(process.env.TEMPLATE_API_URL + 'template');
     url.searchParams.append('name', itemId);
     const response = await fetch(url, {
       headers: {
@@ -577,7 +577,7 @@ const importFromJsonServer = async (itemId) => {
 let search = ref('')
 const searchTemplate = async () => {
   try {
-    const url = new URL(process.env.TEMPLATE_API_URL+'search');
+    const url = new URL(process.env.TEMPLATE_API_URL + 'search');
     url.searchParams.append('name', search.value);
     const response = await fetch(url, {
       headers: {
@@ -609,7 +609,7 @@ const DeleteeFromJsonServer = async (itemId) => {
     type: 'warning',
   }).then(async () => {
     try {
-      const url = new URL(process.env.TEMPLATE_API_URL+'template');
+      const url = new URL(process.env.TEMPLATE_API_URL + 'template');
       url.searchParams.append('name', itemId);
       const response = await fetch(url, {
         method: 'DELETE',
@@ -689,7 +689,7 @@ const savetemplate = async (types) => {
     onlySelected: exportOnlySelected.value
   })
   try {
-    const response = await fetch(process.env.TEMPLATE_API_URL+'saveTemplate', {
+    const response = await fetch(process.env.TEMPLATE_API_URL + 'saveTemplate', {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json'
@@ -722,7 +722,7 @@ async function getTemplats() {
   const fileName = getQueryParams(url);
   if (fileName.fileName != undefined) {
     try {
-      const url = new URL(process.env.TEMPLATE_API_URL+'template');
+      const url = new URL(process.env.TEMPLATE_API_URL + 'template');
       url.searchParams.append('name', fileName.fileName);
       const response = await fetch(url, {
         headers: {
@@ -747,7 +747,7 @@ const templateItems = async () => {
   };
   names.clear() //清空map 重新渲染
   try {
-    const response = await fetch(process.env.TEMPLATE_API_URL+'template', {
+    const response = await fetch(process.env.TEMPLATE_API_URL + 'template', {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
@@ -787,7 +787,52 @@ function getQueryParams(url) {
   }
 
 }
+//获取图片
+async function getImage() {
+  const url = window.location.href
+  const queryParamsStr = url.includes('?') ? url.split('?')[1] : '';
+  const queryParams = new URLSearchParams(queryParamsStr);
+  // 提取所需参数
+  const type = queryParams.get('type');
+  const filename = queryParams.get('filename');
+  if (type === "upload" && filename != undefined) {
+    console.log(type, filename)
+    try {
+      const response = await fetch(process.env.TEMPLATE_API_URL + `getImage?name=${filename}`)
+      const imageUrl = await response.text();
+      if (!response.ok) throw new Error('Failed to fetch JSON data')
+    // // 创建一个隐藏的可下载链接
+    // const anchorElement = document.createElement('a');
+    // anchorElement.style.display = 'none';
+    // document.body.appendChild(anchorElement);
+
+    // // 创建Blob URL
+    // const objectUrl = URL.createObjectURL(imageUrl);
 
+    // // 设置下载属性
+    // anchorElement.href = objectUrl;
+    // anchorElement.download = filename;
+
+    // // 触发点击事件以下载图片
+    // anchorElement.click();
+
+    // // 清理
+    // URL.revokeObjectURL(objectUrl);
+    // document.body.removeChild(anchorElement);
+      // // 创建Image元素并插入到DOM中
+      // const imgElement = document.createElement('img');
+      // imgElement.src = imageUrl;
+      // document.body.appendChild(imgElement);
+       // 创建Image元素并插入到DOM中
+    const imgElement = document.createElement('img');
+    imgElement.src = imageUrl;
+    document.body.appendChild(imgElement);
+    } catch (error) {
+      ElNotification.warning('获取失败')
+      console.log(error);
+    }
+  }
+}
 
 const reRenderExportImage = () => {
   exportImageUrl.value = app.exportImage({
@@ -939,6 +984,7 @@ onMounted(() => {
 })
 onMounted(() => {
   getTemplats()
+  getImage()
 })
 </script>