06. 开发农产品管理功能

4925 字约 10 分钟读完3102 次阅读更新于 2026/5/3

效果图，难度3颗星image.png

农产品信息数据库表

image.png

注意sql的写法，如果报错了，记得仔细对照下我的sqlimage.png
文件上传的接口地址

// 文件上传的接口地址
const uploadUrl = import.meta.env.VITE_BASE_URL + '/files/upload'

图片上传怎么做的

先写上表单的组件
image.png
设置回调钩子
image.png
后端设置文件上传和下载接口，才可以正常使用
image.png
image.png

表格图片预览

<el-table-column label="图片" prop="img">
<template #default="scope">
  <el-image style="width: 50px; height: 50px; border-radius: 5px" :src="scope.row.img"
  :preview-src-list="[scope.row.img]"></el-image>
</template>
</el-table-column>

图片预览出现bug
image.png
image.png

分类的下拉框怎么做的
image.png
写个表单
image.png
定义分类的数组
image.png
获取分类数据
image.png