09. 开发文件上传功能

469 字约 1 分钟读完659 次阅读更新于 2026/5/3

先创建FileController,完成文件上传的接口

image.png
这个错误是告诉你上传的文件夹不存在,需要新建,可以通过程序去创建文件夹

完成Vue的文件上传组件,并把文件路径存储到数据库,在表格里可以显示图片

<el-upload action="http://localhost:9090/files/upload" :on-success="handleFileUpload">
  <el-button type="primary">点击上传</el-button>
</el-upload>

const handleFileUpload = (file) => {
  data.form.avatar = file.data
}
<el-table-column prop="avatar" label="头像">
  <template v-slot="scope">
    <img v-if="scope.row.avatar" :src="scope.row.avatar" alt="" style="width: 50px; height: 50px; border-radius: 50%">
  </template>
</el-table-column>