dede会员前台如何上传图片？

核心思路

1. 开启会员功能：确保 DedeCMS 的会员系统和相关模型（如图集模型）已经正确启用。
2. 修改发布页面模板：找到会员发布内容所使用的模板文件。
3. 添加上传按钮代码：在模板中插入 DedeCMS 内置的上传控件代码。
4. 配置模型字段模型中包含了图片上传的字段（通常是 litpic 或自定义的图片字段）。
5. 处理和显示详情页，通过调用字段来显示会员上传的图片。

第一步：后台基础设置

在修改任何代码之前,请务必在 DedeCMS 后台完成以下设置，这是实现功能的前提。

1. 开启会员功能

   • 登录 DedeCMS 后台。
   • 进入 【系统】-> 【系统基本参数】-> 【会员设置】。
   • 确保 是否开启会员功能 设置为 是。
   • 确保 允许会员投稿 设置为 是。
   • 建议将 会员默认积分 设置为大于 0 的值，以激励会员投稿。
   • 点击【保存】。

2. 检查并配置内容模型

   • 进入 【核心】-> 模型管理】**。
   • 你需要为会员选择一个用于发布图片的模型,通常有两个选择：
     • 文章模型：如果会员只需要上传一张“封面图”，使用此模型，它自带一个 litpic (缩略图) 字段。
     • 图集模型：如果会员需要上传多张图片组成一个图集，使用此模型，它自带一个 piclist (图片集) 字段，专门用于多图上传。
   • 以图集模型为例：点击图集模型后面的【管理字段】。
     • 确认 piclist 字段是存在的，并且状态为“是”。
     • 你也可以在这里添加新的图片字段,member_image，用于存放会员上传的单张图片。

3. 为会员组开通发布权限

   • 进入 【核心】-> 【会员管理】-> 【会员类型管理】。
   • 找到你想要开通投稿权限的会员组（普通会员”）。
   • 点击后面的【管理权限】。
   • 在 发布权限 部分，勾选你之前设置好的内容模型（图集”）。
   • 在 投稿栏目 部分，选择会员可以将内容发布到哪些栏目。
   • 点击【确定】保存。

第二步：修改会员发布页面模板

这是最关键的一步,我们需要在会员发布内容的页面上，添加上传按钮。

1. 找到模板文件

   • DedeCMS 的会员发布页面模板通常位于 /templets/plus/ 目录下。
   • 根据你选择的内容模型,文件名通常是：
     • article_add.htm (发布文章)
     • image_add.htm (发布图集)
   • 以发布图集为例，我们修改 /templets/plus/image_add.htm 文件。

2. 备份模板

   • 在修改 image_add.htm 之前，请务必备份一份原文件，以防修改出错可以恢复。

3. 添加上传代码

   • 用代码编辑器（如 VS Code, Sublime Text, Dreamweaver）打开 image_add.htm。
   • 找到需要插入上传按钮的位置,通常在标题、内容等字段的附近，一个合适的位置是在内容编辑框上方或下方。
   • DedeCMS 提供了非常方便的上传控件标签，直接复制粘贴即可。

   使用图集模型，上传多张图片

   图集模型的上传控件通常已经包含在默认模板中,但你可以根据需要调整其样式和位置，找到类似下面的代码块：

   
   （图片来源网络，侵删）

   <tr>
       <td height="24" colspan="2" bgcolor="#f9f9f9">
           <div style='padding-left:10px;'>
               <strong>图片上传：</strong>
               <button type='button' name='set1' onclick="CheckMultiImg('imgLitpic', 'divLitpic', 'dd')();" class='np coolbg'>选择图片</button>
               <button type='button' name='set3' onclick="ClearMultiImg('imgLitpic', 'divLitpic', 'dd')" class='np coolbg'>清空图片</button>
               <span class='gray'>支持jpg,gif,png,bmp格式，单个文件大小不超过2MB</span>
           </div>
           <div id='divLitpic' class='litpic'></div>
       </td>
   </tr>
   <input type='hidden' name='piclist' id='imgLitpic' value='' />

   • 代码解释：
     • button onclick="CheckMultiImg(...)"：这是调用 DedeCMS 内部的 JavaScript 函数，用于打开图片选择窗口。
     • div id='divLitpic'：这是一个容器，用于显示用户已选择的图片缩略图。
     • input type='hidden' name='piclist'：这是一个隐藏的输入框，用于存储最终提交的图片路径（用逗号隔开）。name='piclist' 必须与后台模型中的字段名一致。

   使用文章模型，只上传一张封面图

   如果你在文章模型中想让会员上传封面图,可以找到 litpic 字段的部分，通常代码是这样的：

   <tr>
       <td height="24" class="bline">缩略图：</td>
       <td height="24" class="bline">
           <input name="litpic" type="text" id="litpic" style="width:" value="" />
           <input type="button" name="set1" value="浏览..." style="width:70px" onClick="SelectImage('form1.litpic','small');" />
       </td>
   </tr>

   • 代码解释：
     • input name="litpic"：这是存储封面图路径的隐藏输入框。name='litpic' 是固定的。
     • input type="button" onClick="SelectImage(...)"：点击此按钮会调用 DedeCMS 的单图选择器。

第三步：修改内容详情页模板显示图片

会员上传的图片最终要在前台文章/图集详情页显示出来。

1. 找到详情页模板

   • 详情页模板通常位于你的网站主题目录下,/templets/default/。
   • 文件名可能是 article_article.htm (文章详情页) 或 image.htm (图集详情页)。

2. 调用图片字段

   显示封面图 (litpic)

   在文章详情页模板中,使用 {dede:field.litpic/} 标签来显示封面图，通常会把它放在 <img> 标签里。

   {dede:field name='litpic'/}

   一个更完整的例子,判断封面图是否存在再显示：

   {dede:field.litpic runphp='yes'}
       if(@me != '') {
           @me = '<img src="' . @me . '" alt="{dede:field.title/}" />';
       } else {
           @me = '<img src="/templets/default/images/default.jpg" alt="{dede:field.title/}" />'; // 如果没有图，显示一个默认图
       }
   {/dede:field.litpic}

   显示图集 (piclist)

   在图集详情页,使用 {dede:field name='piclist' function='GetImgHtml(@me)'/} 来调用图片集并生成HTML代码。

   • function='GetImgHtml(@me)' 是一个关键函数，它会解析后台存储的图片路径字符串（如 a.jpg,b.jpg,c.jpg），并生成包含 <img> 标签和 <a> 标签的HTML代码，用于幻灯片或图片集展示。

   你可以直接把这个标签放在模板中你想要显示图集的位置。

第四步：测试与常见问题

1. 清空缓存：每次修改模板后，都去后台 【系统】-> 【一键更新缓存】** 里清空一下所有缓存。
2. 以会员身份登录前台：使用一个普通会员账号登录你的网站前台。
3. 进入发布页面：点击“会员中心” -> “发布内容”，选择你配置好的模型和栏目。
4. 测试上传：点击“选择图片”或“浏览...”按钮，尝试上传一张本地图片。
5. 检查结果：
   • 上传成功后,应该能看到图片的缩略图出现在页面上。
   • 和内容后,点击“提交”。
   • 去对应的栏目查看,新发布的内容应该已经存在，并且图片能正常显示。

常见问题排查

• 问题1：点击上传按钮没反应。

  • 原因：通常是 JavaScript 路径错误或被禁用。
  • 解决：检查模板头部是否正确引入了 DedeCMS 的 JS 文件，通常是 /include/dedeajax2.js 和 /images/js/jquery/jquery.js，确保浏览器没有禁用 JavaScript。

• 问题2：上传失败，提示“上传目录不存在或不可写”。

  • 原因：DedeCMS 默认的上传目录（如 /uploads/）没有创建，或者没有写入权限。
  • 解决：通过 FTP 或服务器管理工具，确保 /uploads/ 目录及其所有子目录（如 /uploads/allimg/）存在，并将其权限设置为 755 或 777（777 有安全风险，但可以快速测试）。

• 问题3：图片上传成功，但在详情页不显示。

  • 原因：
    1. 详情页模板中调用字段的标签错误（如写成了 {dede:field.ltpic/} 拼写错误）。
    2. 没有清空缓存。
    3. 内容模型和详情页模板不匹配（比如用文章模型发布的，却在图集详情页模板里调用）。
  • 解决：仔细核对标签拼写，清空缓存，并确保模型与模板对应。

• 问题4：想给会员自定义一个上传字段怎么办？

  • 解决：
    1. 进入 【核心】-> 模型管理】**，选择你的模型，点击【管理字段】。
    2. 点击【增加新字段】，字段名建议用 member_img，字段类型选择“多媒体（图片）”，其他信息填写后保存。
    3. 然后去修改 image_add.htm 模板，参考上面的代码，添加一个新的上传控件，把 name='piclist' 改成 name='member_img'。
    4. 在详情页模板中,用 {dede:field.member_img/} 来调用这个自定义字段。

通过以上步骤,你应该就能成功地在 DedeCMS 前台为会员开启图片上传功能了，如果遇到更具体的问题，可以提供你的错误提示或代码片段，以便进一步分析。