15234

vue/gold-system/src/views/recharge/addRecharge.vue

@@ -194,8 +194,8 @@ const getCurrency = async function () {
 };
 getCurrency();
 
-// // 这是添加上传图片的接口
-// const imageUrl = ref("");
+// 这是添加上传图片的接口
+const imageUrl = ref("");
 
 // // 上传图片成功的回调函数
 // const handleAvatarSuccess = (response, uploadFile) => {
@@ -226,40 +226,105 @@ getCurrency();
 //   imageUrl.value = URL.createObjectURL(uploadFile.raw);
 //   console.log("图片上传成功", response, uploadFile);
 // };
-const handleAvatarSuccess = (response, uploadFile) => {
-  // 将图片转换为 Base64 编码
-  const reader = new FileReader();
-  reader.onloadend = () => {
-    const base64data = reader.result;
-    const data = {
-      rechargeVoucher: base64data,
-    };
-    console.log("图片名称", data);
-    // 发送 JSON 对象到服务器
-    API.post("http://192.168.8.93:10010/upload", {})
-      .then((res) => {
-        console.log("图片上传成功", res);
-        addRecharge.value.rechargeVoucher = `http://192.168.8.93:10010/upload/${response.data}`;
-        console.log("图片名称", addRecharge.value.rechargeVoucher);
-      })
-      .catch((error) => {
-        console.error("图片上传失败", error);
-      });
-  };
-  reader.readAsDataURL(uploadFile.raw);
-  imageUrl.value = URL.createObjectURL(uploadFile.raw);
-  console.log("图片上传成功", response, uploadFile);
-};
+// const handleAvatarSuccess = (response, uploadFile) => {
+//   // 将图片转换为 Base64 编码
+//   const reader = new FileReader();
+//   reader.onloadend = () => {
+//     const base64data = reader.result;
+//     const data = {
+//       rechargeVoucher: base64data,
+//     };
+//     console.log("图片名称", data);
+//     // 发送 JSON 对象到服务器
+//     API.post("http://192.168.8.93:10010/upload", {})
+//       .then((res) => {
+//         console.log("图片上传成功", res);
+//         addRecharge.value.rechargeVoucher = `http://192.168.8.93:10010/upload/${response.data}`;
+//         console.log("图片名称", addRecharge.value.rechargeVoucher);
+//       })
+//       .catch((error) => {
+//         console.error("图片上传失败", error);
+//       });
+//   };
+//   reader.readAsDataURL(uploadFile.raw);
+//   imageUrl.value = URL.createObjectURL(uploadFile.raw);
+//   console.log("图片上传成功", response, uploadFile);
+// };
 // 上传图片之前的校验函数
-const beforeAvatarUpload = (rawFile) => {
-  if (rawFile.type !== "image/jpeg" && rawFile.type !== "image/png") {
-    ElMessage.error("图片格式必须为jpg或png!");
-    return false;
-  } else if (rawFile.size / 1024 / 1024 > 2) {
-    ElMessage.error("Avatar picture size can not exceed 2MB!");
-    return false;
-  }
-  return true;
+// const beforeAvatarUpload = (rawFile) => {
+//   if (rawFile.type !== "image/jpeg" && rawFile.type !== "image/png") {
+//     ElMessage.error("图片格式必须为jpg或png!");
+//     return false;
+//   } else if (rawFile.size / 1024 / 1024 > 2) {
+//     ElMessage.error("Avatar picture size can not exceed 2MB!");
+//     return false;
+//   }
+//   return true;
+// };
+// const beforeAvatarUpload = (file) => {
+//   return new Promise((resolve, reject) => {
+//     const reader = new FileReader();
+//     reader.onload = (e) => {
+//       const base64Data = e.target.result;
+//       const imgData = {
+//         image: base64Data,
+//         fileName: file.name,
+//       };
+//       const formData = new FormData();
+//       formData.append("imageData", JSON.stringify(imgData));
+
+//       // 使用 fetch 或者 axios 发送 formData
+//       fetch("http://192.168.8.93:10010/upload", {
+//         method: "POST",
+//         body: formData,
+//       })
+//         .then((response) => response.json())
+//         .then((data) => {
+//           ElMessage.success("上传成功");
+//           resolve();
+//         })
+//         .catch((error) => {
+//           ElMessage.error("上传失败");
+//           reject();
+//         });
+//     };
+//     reader.readAsDataURL(file);
+//   });
+// };
+const handleAvatarSuccess = (response, file, fileList) => {
+  // 处理上传成功的逻辑
+  imageUrl.value = URL.createObjectURL(file.raw);
+};
+
+const beforeAvatarUpload = (file) => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      const base64Data = e.target.result;
+      const imgData = {
+        image: base64Data,
+        fileName: file.name,
+      };
+      const formData = new FormData();
+      formData.append("imageData", JSON.stringify(imgData));
+
+      // 使用 fetch 或者 axios 发送 formData
+      fetch("http://192.168.8.93:10010/upload", {
+        method: "POST",
+        body: formData,
+      })
+        .then((response) => response.json())
+        .then((data) => {
+          ElMessage.success("上传成功");
+          resolve();
+        })
+        .catch((error) => {
+          ElMessage.error("上传失败");
+          reject();
+        });
+    };
+    reader.readAsDataURL(file);
+  });
 };
 
 //充值方式条目