jeecg前端框架之上传图片（vue）

最新推荐文章于 2025-10-10 09:36:58 发布

原创

最新推荐文章于 2025-10-10 09:36:58 发布 · 3.8k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#jeecg #vue

本文介绍了在Jeecg前端Vue框架中如何处理图片上传及列表展示的问题。针对Jeecg封装后的Vue语法特性，文中详细讲解了使用模态框进行图片上传，并展示了在数据列表中显示图片的方法。图片上传后存储在本地D盘的upload文件夹，通过系统配置映射。同时，文章提到Jeecg默认的图片缓存方式，并指出如需自定义如FDFS或FTP等远程缓存，需要修改ComController的图片预览方法。

jeecg里面的vue是封装过的，语法与原生vue有很大差别，开发时遇到问题，资料也不多，比如现在要讲的图片上传问题。先给出解决方案：

1.模态框
2.列表显示

1.先看模态框怎么展示的，照片用picture表示：

在这里插入图片描述

控件

<a-form-item label="头像" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-upload
            listType="picture-card"
            class="avatar-uploader"
            :showUploadList="false"
            :action="uploadAction"
            :data="{'isup':1}"
            :headers="headers"
            :beforeUpload="beforeUpload"
            @change="handleChange"
          >
            <img v-if="picUrl" :src="getAvatarView()" alt="头像" style="height:104px;max-width:300px"/>
            <div v-else>
              <a-icon :type="uploadLoading ? 'loading' : 'plus'" />
              <div class="ant-upload-text">上传</div>
            </div>
          </a-u

最低0.47元/天解锁文章