浏览代码

fix:图片和视频上传修复

chenlei 2 月之前
父节点
当前提交
b9417f3b91

+ 0 - 5
src/api/modules/etaMenuApi.js

@@ -55,9 +55,4 @@ export const menuConfigInterface = {
     addMenuIcon:params=>{
         return post('/eta_business/menu/icon/add',params)
     },
-    
-    //上传banner图
-    bannerupload:params=>{
-        return post('/banner/upload',params)
-    }
 }

+ 1 - 1
src/api/modules/trainingApi.js

@@ -165,7 +165,7 @@ export const VideoInterface = {
      * @returns 
      */
     bannerupload:(params)=>{
-        return post('/banner/upload',params)
+        return post('/resource/image/upload',params)
     },
     /**
      * 上传阿里云 oss获取临时票据

+ 21 - 8
src/views/etaMenu/components/ChoosedIconDialog.vue

@@ -11,8 +11,9 @@
             <div class="dialog-container-wrap">
                 <div class="top">
                     <t-upload action="" accept="image/*" 
-                        :http-request="handleUploadImg" 
-                        :show-file-list="false"
+                        :requestMethod="handleUploadImg" 
+                        :show-image-file-name="false" 
+                        theme="custom" 
                     >
                         <t-button size="small">选择文件</t-button>
                         <span>支持上传图标</span>
@@ -39,6 +40,7 @@
 <script setup>
 import { ref, watch, onMounted } from 'vue';
 import { menuConfigInterface } from '@/api/modules/etaMenuApi';
+import { VideoInterface } from '@/api/modules/trainingApi';
 
 // 定义响应式数据
 const props = defineProps({
@@ -72,29 +74,40 @@ watch(() => props.isShowIconDialog, (newVal) => {
 
 // 处理图片上传的方法
 const handleUploadImg = async (e) => {
-  if (!['image/png', 'image/jpeg'].includes(e.file.type)) {
+  if (!['image/png', 'image/jpeg'].includes(e.raw.type)) {
     MessagePlugin.warning('仅支持png、jpg格式的图片');
     return;
   }
-  if (e.file.size > 50 * 1024) {
+  if (e.raw.size > 50 * 1024) {
     MessagePlugin.warning('图标文件大小不能超过50kb');
     return;
   }
 
   const form = new FormData();
-  form.append('file', e.file);
-
+  form.append('file', e.raw);
+  let isSuccess = false
+  let url = ''
   try {
-    const res = await bannerupload.bannerupload(form);
+    const res = await VideoInterface.bannerupload(form);
     if (res.Ret === 200) {
       await menuConfigInterface.addMenuIcon({
         IconPath: res.Data.ResourceUrl,
       });
       getIconList();
-    }
+      isSuccess = true;
+      url = res.Data.ResourceUrl;
+    } else isSuccess = false;
   } catch (error) {
     console.error('上传图标失败', error);
+    isSuccess = false;
   }
+  return {
+    status: isSuccess ? 'success' : 'fail',
+    response: {
+      url,
+    },
+    error: '上传失败',
+  };
 };
 
 // 保存图标的方法

+ 2 - 2
src/views/etaMenu/components/ModifyMenuDialog.vue

@@ -105,7 +105,7 @@ const emit = defineEmits(['add', 'edit', 'close']);
 // 响应式数据
 const form = ref({
   MenuType: 0,
-  ParentId: 0,
+  ParentId: -1,
   Name: '',
   IconPath: '',
   Path: '',
@@ -217,7 +217,7 @@ const changeListLevel = (level) => {
 const resetForm = () => {
   form.value = {
     MenuType: 0,
-    ParentId: 0,
+    ParentId: -1,
     Name: '',
     IconPath: '',
     Path: '',

+ 18 - 13
src/views/training/modifyVideoPage.vue

@@ -26,7 +26,7 @@
             <t-form-item label="上传封面" name="CoverImg">
               <div style="display: block;">
                   <t-upload accept="image/*" 
-                      :http-request="handleUploadImg" :show-file-list="false" :disabled="isImageUploading">
+                      :requestMethod="handleUploadImg" theme="custom" :show-image-file-name="false" :disabled="isImageUploading">
                       <t-button theme="primary" :loading="isImageUploading">点击上传</t-button>
                       <span style="color:#999999;margin-left: 5px;" @click.stop>建议尺寸比例3:2,支持png、jpg、gif、jpeg格式</span>
                   </t-upload>
@@ -197,26 +197,33 @@ const getTagList = async (keyword = '') => {
 };
 
 // 检查图片是否合法
-const handleUploadImg = (file) => {
+const handleUploadImg = async (file) => {
   isImageUploading.value = true;
-  const { type } = file.file;
+  const { type } = file.raw;
   if (!['image/png', 'image/jpeg'].includes(type)) {
     MessagePlugin.warning('仅支持png、jpg格式的图片');
     isImageUploading.value = false;
     return;
   }
-  uploadImg(file);
+  const res = await uploadImg(file);
+  return {
+    status: res ? 'success' : 'fail',
+    response: {
+      url: form.value.CoverImg,
+    },
+    error: '上传失败',
+  };
 };
 
 // 上传图片
-const uploadImg = (file) => {
+const uploadImg = async (file) => {
   const formData = new FormData();
-  formData.append('file', file.file);
-  VideoInterface.bannerupload(formData).then(res => {
-    isImageUploading.value = false;
-    if (res.Ret !== 200) return;
-    form.value.CoverImg = res.Data.ResourceUrl;
-  });
+  formData.append('file', file.raw);
+  const res = await VideoInterface.bannerupload(formData)
+  isImageUploading.value = false;
+  if (res.Ret !== 200) return false;
+  form.value.CoverImg = res.Data.ResourceUrl;
+  return true;
 };
 
 // 检查视频是否合法,并获取视频时长
@@ -233,8 +240,6 @@ const handleUploadVideo = async (file) => {
 
 // 获取视频时长的Promise
 const handleGetDuration = (file) => {
-  console.log(file);
-  
   return new Promise((resolve, reject) => {
     const fileUrl = URL.createObjectURL(file.raw);
     const audioEl = new Audio(fileUrl);