M测试官 2024-02-02 11:28 采纳率: 25%
浏览 41
已结题

前端页面上传头像后,没有在页面回显?

前提环境:
前端:vue框架
后端:django框架

问题描述:
前端页面上传头像后,没有在页面回显?

1、头像是成功上传到后端的,而且在路径:data\public\avatar也生成了一张我上传的图片(data目录是在django项目的根目录下),并将/public/avatar/67655b907f.png存到了数据库的avatar字段。

img

2、但是看到并没有回显到页面

img

img

img

解决的思路:
在网上找了很久没大都是以下的解决方式,然而并没有解决问题;

是在django的settings和url设置;
MEDIA_URL = '/media/'
MEDIA_ROOT = [os.path.join(DATA_DIR, 'media')]

urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

  • 写回答

16条回答 默认 最新

  • 专家-赤兔[在线] 优质创作者: 编程框架技术领域 2024-02-02 11:34
    关注
    获得0.45元问题酬金

    引自免费微信小程序:皆我百晓生

    根据您提供的信息,前端上传头像后,图片文件成功存储在服务器上,并且数据库中也正确更新了avatar字段的路径。但是,在前端页面上没有成功回显新上传的头像。

    从您的描述来看,问题可能出在Django配置和前端对静态资源或媒体文件的处理上。您已经设置了MEDIA_URL 和 MEDIA_ROOT,但前端试图通过 /public/avatar/ 路径来访问头像图片,而不是通过配置的MEDIA_URL路径。

    解决这个问题,请按照以下步骤操作:

    1. Django端配置确认: 确认Django项目的settings.py中的MEDIA设置正确无误,例如:

      DATA_DIR = os.path.join(BASE_DIR, 'data')
      MEDIA_URL = '/media/'  # 这个URL前缀会被用于生成图片的URL
      MEDIA_ROOT = os.path.join(DATA_DIR, 'media')  # 图片实际存储的位置
      
      # 将媒体文件添加到urlpatterns中
      from django.conf import settings
      from django.conf.urls.static import static
      
      urlpatterns = [
          # ... 其他URL路由
      ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
      
    2. 前端访问路径修正: 在前端代码中,确保加载头像时使用的URL是基于Django配置的MEDIA_URL而非/public/avatar/。修改前端Vue模板中的src属性,使其指向正确的媒体文件URL:

      <img data-v-b87ecdea :src="user.avatar" class="avatar">
      

      然后,在Vue组件的相关JavaScript部分(假设你有一个响应式数据对象 user),确保从API获取用户信息后,将avatar字段的值转换为完整URL:

      // 假设你有一个fetchUser函数用来从后端API获取用户信息
      async fetchUser() {
        const response = await axios.get('/api/user_info'); // 替换为你的实际API地址
        this.user = response.data;
        // 更新avatar URL
        this.user.avatar = `${process.env.VUE_APP_BASE_API}/media${this.user.avatar}`; 
        // 注意:VUE_APP_BASE_API应替换为你项目中定义的Vue应用与后端API通信的基础URL
      }
      
    3. Nginx或其他代理服务器配置: 如果你在生产环境中使用了Nginx等代理服务器,还需要确保Nginx配置正确转发媒体文件请求至Django应用。例如,在Nginx配置中添加如下规则:

      location /media/ {
          alias /path/to/your/django/project/data/media/;
          expires 30d;
      }
      
    4. 刷新前端缓存: 清除浏览器缓存,确保加载的是最新的头像图片资源。

    通过以上步骤调整后,前端应该能够正确地从Django服务器获取并显示上传的头像图片。如果问题依然存在,请检查网络请求是否成功、服务器日志是否有错误提示以及前端是否能正确解析返回的数据。

    评论 编辑记录

报告相同问题?

问题事件

  • 系统已结题 2月10日
  • 创建了问题 2月2日