作者加头像

src/api/request.js

@@ -51,6 +51,11 @@ const putavideo = (id,data) => {
 const putavideos = (data) => {
     return http.posts("/admin/video", data);
 };
+const uploadAuthorAvatar = (file) => {
+    const formData = new FormData();
+    formData.append('file', file);
+    return http.postFormData("/admin/video/author/avatar", formData);
+};
 const UEDITOR_SERVERURL = import.meta.env.VITE_APP_UEDITOR_SERVERURL
 const editorConfig = {
   // 后端服务地址，后端处理参考
@@ -69,5 +74,5 @@ const editorConfig = {
 
 export default {
     indexdata, getindex,agreement,updateagreement,gettime,updatetime,getarticle,gethospital,putarticles
-    ,putarticle,putstatus,getvote,getavideo,getvideovote,putvideostatus,putavideo,putavideos,editorConfig
+    ,putarticle,putstatus,getvote,getavideo,getvideovote,putvideostatus,putavideo,putavideos,uploadAuthorAvatar,editorConfig
 }

src/utils/http/http.js

@@ -57,7 +57,21 @@ const del = (url, data) => {
     })
 }
 
+const postFormData = (url, formData) => {
+    return new Promise((resolve, reject) => {
+        instances.post(url, formData, {
+            headers: {
+                'Content-Type': 'multipart/form-data'
+            }
+        }).then(res => {
+            resolve(res)
+        }).catch(err => {
+            reject(err)
+        })
+    })
+}
+
 
 export default {
-    post, get, put, del,posts,puts
+    post, get, put, del,posts,puts,postFormData
 }

src/view/videoList.vue

@@ -129,6 +129,20 @@
               <el-button type="primary" :icon="Minus" size="large" style="margin-left: 16px;"
                 v-if="author_name.length > 1" @click="changeauther('remove', index)" />
             </div>
+            <div style="margin-top: 10px;display: flex;align-items: center;">
+              <span style="margin-right: 16px;margin-left: 5px;">头像：</span>
+              <el-upload
+                class="avatar-uploader"
+                :action="''"
+                :show-file-list="false"
+                :before-upload="(file) => beforeAvatarUpload(file, index)"
+                :http-request="(options) => handleAvatarUpload(options, index)"
+                accept="image/*"
+              >
+                <img v-if="item.author_avatar" :src="item.author_avatar" class="avatar" />
+                <el-icon v-else class="avatar-uploader-icon"><Upload /></el-icon>
+              </el-upload>
+            </div>
           </div>
         </div>
         <div style="display: flex;align-items: center;">
@@ -185,7 +199,7 @@
 <script setup>
 import request from "../api/request.js";
 import { ElMessageBox, ElMessage } from 'element-plus'
-import { Plus, Minus } from '@element-plus/icons-vue'
+import { Plus, Minus, Upload } from '@element-plus/icons-vue'
 import { nextTick } from "vue";
 
 const loading = ref(false)
@@ -269,6 +283,7 @@ const changeauther = (type, index) => {
   if (type == 'add') {
     author_name.value.push({
       author_name: '',
+      author_avatar: '',
 
     })
 
@@ -346,6 +361,7 @@ const addnewOne = () => {
 
   author_name.value.push({
     author_name: '',
+    author_avatar: '',
 
   })
 
@@ -455,6 +471,7 @@ const handleEdit = (index, row) => {
   for (let i = 0; i < row.video_author.length; i++) {
     author_name.value.push({
       author_name: row.video_author[i].author_name,
+      author_avatar: row.video_author[i].author_avatar || '',
 
     })
 
@@ -466,6 +483,35 @@ const handleEdit = (index, row) => {
   }
 
 
+}
+const beforeAvatarUpload = (file, index) => {
+  const isImage = file.type.startsWith('image/')
+  const isLt2M = file.size / 1024 / 1024 < 2
+
+  if (!isImage) {
+    ElMessage.error('上传文件只能是图片格式!')
+    return false
+  }
+  if (!isLt2M) {
+    ElMessage.error('上传图片大小不能超过 2MB!')
+    return false
+  }
+  return true
+}
+const handleAvatarUpload = async (options, index) => {
+  const { file } = options
+  try {
+    const res = await request.uploadAuthorAvatar(file)
+    if (res.data.code === 200) {
+      author_name.value[index].author_avatar = res.data.data.url
+      ElMessage.success('头像上传成功')
+    } else {
+      ElMessage.error(res.data.msg || '头像上传失败')
+    }
+  } catch (error) {
+    ElMessage.error('头像上传失败')
+    console.error('上传头像失败:', error)
+  }
 }
 const handleDelete = (index, row) => {
   console.log(index, row)
@@ -560,7 +606,8 @@ const open = (titles, spans) => {
               if (hospital_id.value[i].hospital_id != '' && author_name.value[i].author_name != '') {
                 updateForm.value.video_author.push({
                   author_name: author_name.value[i].author_name,
-                  hospital_id: hospital_id.value[i].hospital_id
+                  hospital_id: hospital_id.value[i].hospital_id,
+                  author_avatar: author_name.value[i].author_avatar || ''
 
                 })
               }
@@ -653,4 +700,29 @@ const searchs = () => {
   height: 100%vh;
 
 }
+.avatar-uploader {
+  display: inline-block;
+}
+.avatar-uploader .avatar {
+  width: 100px;
+  height: 100px;
+  display: block;
+  border-radius: 4px;
+  object-fit: cover;
+}
+.avatar-uploader .el-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 100px;
+  height: 100px;
+  line-height: 100px;
+  text-align: center;
+  border: 1px dashed #d9d9d9;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: border-color 0.3s;
+}
+.avatar-uploader .el-icon:hover {
+  border-color: #409eff;
+}
 </style>