前端页面上传头像后，没有在页面回显？

Question

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

问题描述：
前端页面上传头像后，没有在页面回显？

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

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

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

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

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

Answer 1

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

根据您提供的信息，前端上传头像后，图片文件成功存储在服务器上，并且数据库中也正确更新了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服务器获取并显示上传的头像图片。如果问题依然存在，请检查网络请求是否成功、服务器日志是否有错误提示以及前端是否能正确解析返回的数据。