若依项目-单图片上传功能实现

前端参考于：原文链接：https://blog.csdn.net/qq_42751248/article/details/107326737

后端使用若以自带的upload方法

前端

在index.vue中添加以下代码

<!--:action里面放图片上传调取的后台方法 :headers设置上传的请求头部,使请求携带自定义token，获取访问权限 -->
<!--:on-success图片上传成功后的回调方法，用于拿到图片存储路径等信息-->
<!--:before-upload图片上传前的逻辑判断，例如判断图片大小，格式等-->
<!--:on-preview图片预览方法 :on-remove图片删除方法   list-type代表文件列表的类型 -->
<!--file-list存放成功上传图片列表，这里此属性用于修改功能时页面已有图片的显示-->


   <!-- 添加或修改对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
<!-- 上传图片部分起（添加部分）-->
        <el-form-item label="报销凭证附件" prop="articleImg" label-width="80">
            <el-upload
              :action="imgUpload.url"
              :headers="imgUpload.headers"
              list-type="picture-card"
              :limit="limit"
              :on-exceed="handleExceed"
              :on-success="handlePictureSuccess"
              :before-upload="beforeAvatarUpload"
              :on-preview="handlePictureCardPreview"
              :file-list="fileList"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%"  v-if="imageUrl" :src="imageUrl" alt="">
            </el-dialog>
          </el-form-item>
<!-- 上传图片部分止-->
         </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

<script>
import { getToken } from "@/utils/auth";
export default {
    ...
  data() {
    return {
// 图片数量限制
      limit: 1,
      //页面上存的暂时图片地址List
      fileList: [{url: ""}],
      //图片地址
      imageUrl: "",
      //图片名称不含路径的
      nFileName:"",
      dialogVisible: false,
      imgUpload: {
        // 设置上传的请求头部
        headers: {
          Authorization: "Bearer " + getToken()
        },
        // 图片上传的方法地址:
        url: process.env.VUE_APP_BASE_API + "/project/baoxiao/upload",
      },

      ...

    };
  },
  methods: {

    ...

     reset() {
      ...
      this.fileList = undefined;
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const bxId = row.bxId || this.ids
      getBaoxiao(bxId).then(response => {
//修改按钮操作添加
        if (response.data.fileUrl != null){
          this.fileList = [{ url: process.env.VUE_APP_BASE_API + response.data.fileUrl}];
        }

        this.form = response.data;
        this.open = true;
        this.title = "修改报销管理";
      });
    },

    //图片上传前的相关判断
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type == 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 5;
      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG/PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 5MB!');
      }
      return isJPG && isLt2M;
    },
    //图片预览
    handlePictureCardPreview(file) {
      this.imageUrl = file.url;
      this.dialogVisible = true;
    },
    //图片上传成功后的回调
    handlePictureSuccess(res, file) {
      //设置图片访问路径 （fileUrl 后台传过来的的上传地址）
      this.imageUrl = file.response.fileUrl;
      //下面是为了将图片信息存入数据库准备
      this.form.fileUrl = file.response.fileUrl;
      this.form.fileName = file.response.fileName;
      this.form.fileUuid = file.response.fileUuid;
    },
    // 文件个数超出
    handleExceed() {
      this.$modal.msgError(`上传链接LOGO图片数量不能超过 ${this.limit} 个!`);
    }
}

效果

后端

1. 上传图片，对于我这个来说就是将图片换个地方保存，实际应该是将图片存到服务器里（这句是废话，因为我也说不清楚，迷糊的话只看前面四个字就好）

2. 将图片信息存放到数据库中

以下是我的项目添加的代码，后面有简化的后端代码

BaoxiaoController.java文件里

@RestController
@RequestMapping("/project/baoxiao")
public class BaoxiaoController extends BaseController
{
    @Autowired
    private IBaoxiaoService baoxiaoService;

//IFileService是自己写的，就是service接口，service实现类，mapper接口、mapper.xml一套仿照若依其他的写就行
    @Autowired
    private IFileService fileService;

    @Autowired
    private ServerConfig serverConfig; 
    /**
     * 缩略图上传
     */
    @Log(title = "预览缩略图", businessType = BusinessType.UPDATE)
    @PostMapping("/upload")
    public AjaxResult uploadFile(MultipartFile file) throws IOException
    {
        if (!file.isEmpty())
        {
            // 上传文件路径（上传文件存放磁盘位置）
            String filePath = RuoYiConfig.getUploadPath();
            //上传并返回新文件名称（即你存的文件名称）（带路径）
            String fileName = FileUploadUtils.upload(filePath, file);
            String url = serverConfig.getUrl() + fileName;
            AjaxResult ajax = AjaxResult.success();
            ajax.put("imgUrl", url);
            ajax.put("fileUrl", fileName);
            ajax.put("fileUuid", FileUtils.getName(fileName));//存的文件名
            ajax.put("fileName", file.getOriginalFilename());//原始文件名
            return ajax;
        }
        return AjaxResult.error("上传图片异常，请联系管理员");
    }
...
 /**
     * 新增报销管理
     */
    @PreAuthorize("@ss.hasPermi('project:baoxiao:add')")
    @Log(title = "报销管理", businessType = BusinessType.INSERT)
    @PostMapping
    public AjaxResult add(@RequestBody BaoxiaoExp baoxiao)
    {
//存附件表
        if(baoxiao.getFileUuid() != null)
        {
        //File类也是我新建的，根据数据库附件表建的类，对应的类需要导入
            File file = new File();
            file.setFileUrl(baoxiao.getFileUrl());
            file.setFileName(baoxiao.getFileName());
            file.setFileUuid(baoxiao.getFileUuid());
            file.setCreateUser(getUserId());
            fileService.insertFile(file);
            baoxiao.setFileIdBx(file.getFileId());
        }
//存报销表
        baoxiao.setCreateUser(getUserId());
        return toAjax(baoxiaoService.insertBaoxiao(baoxiao));
    }

    /**
     * 修改报销管理
     */
    @PreAuthorize("@ss.hasPermi('project:baoxiao:edit')")
    @Log(title = "报销管理", businessType = BusinessType.UPDATE)
    @PutMapping
    public AjaxResult edit(@RequestBody BaoxiaoExp baoxiao)
    {
//存附件表
        if(baoxiao.getFileUuid() != null)
        {
            File file = new File();
            file.setFileUrl(baoxiao.getFileUrl());
            file.setFileName(baoxiao.getFileName());
            file.setFileUuid(baoxiao.getFileUuid());
            file.setCreateUser(getUserId());
            if (baoxiao.getFileIdBx() !=null)
            {
                file.setFileId(baoxiao.getFileIdBx());
                file.setCreateUser(getUserId());
                fileService.UpdateFile(file);
            }
            else
            {
                file.setCreateUser(getUserId());
                fileService.insertFile(file);
                baoxiao.setFileIdBx(file.getFileId());
            }
        }
//存报销表
        baoxiao.setCreateUser(getUserId());
        return toAjax(baoxiaoService.updateBaoxiao(baoxiao));
    }

注：我是将附件（图片)信息单独存放一个表的，其他表有关附件的都是关联附件id的，不是这样的直接将附件地址存到数据库表里就好，如下

简化的代码

controller.java文件

@RestController
@RequestMapping("/project/baoxiao")
public class BaoxiaoController extends BaseController
{
    @Autowired
    private IBaoxiaoService baoxiaoService;

    @Autowired
    private ServerConfig serverConfig; 
    /**
     * 缩略图上传
     */
    @Log(title = "预览缩略图", businessType = BusinessType.UPDATE)
    @PostMapping("/upload")
    public AjaxResult uploadFile(MultipartFile file) throws IOException
    {
        if (!file.isEmpty())
        {
            // 上传文件路径（上传文件存放磁盘位置）
            String filePath = RuoYiConfig.getUploadPath();
            //上传并返回新文件名称（即你存的文件名称）（带路径）
            String fileName = FileUploadUtils.upload(filePath, file);
            String url = serverConfig.getUrl() + fileName;
            AjaxResult ajax = AjaxResult.success();
            ajax.put("imgUrl", url);
            ajax.put("fileUrl", fileName);
            return ajax;
        }
        return AjaxResult.error("上传图片异常，请联系管理员");
    }
...
 /**
     * 新增报销管理
     */
    @PreAuthorize("@ss.hasPermi('project:baoxiao:add')")
    @Log(title = "报销管理", businessType = BusinessType.INSERT)
    @PostMapping
    public AjaxResult add(@RequestBody BaoxiaoExp baoxiao)
    {
        baoxiao.setCreateUser(getUserId());
        return toAjax(baoxiaoService.insertBaoxiao(baoxiao));
    }

    /**
     * 修改报销管理
     */
    @PreAuthorize("@ss.hasPermi('project:baoxiao:edit')")
    @Log(title = "报销管理", businessType = BusinessType.UPDATE)
    @PutMapping
    public AjaxResult edit(@RequestBody BaoxiaoExp baoxiao)
    {

        baoxiao.setCreateUser(getUserId());
        return toAjax(baoxiaoService.updateBaoxiao(baoxiao));
    }

注：1、controller里有一些包需要导入

2、使用简化的后端，前端vue页面只需将与fileUuid、fileName相关部分删除即可

小白学习阶段，大家共勉