若依的多图片上传/回显/保存多图片路径url逗号隔开存数据库,前后端都有,拷贝即用

最新推荐文章于 2025-09-18 23:32:08 发布

原创

最新推荐文章于 2025-09-18 23:32:08 发布 · 7.4k 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#java #javascript #vue.js #前端 #后端

文章介绍了前端如何处理用户上传的图片，包括图片路径的存储、上传前的校验、限制上传数量、图片预览以及回显。后端通过接收文件并返回文件URL，前端将这些URL以逗号分隔的字符串形式存储在数据库中。此外，还提供了Vue.js组件和相关方法的示例代码，用于处理图片上传的整个流程。

用户在前端上传不等数量图片,现在需要把其相对/绝对路径存进数据库中,方便后期使用和页面回显.

后端存储pic字段是字符串用于用","逗号拼接多个图片 url

1.html代码:

  <el-form ref="tableData71" :model="tableData71">
                      <el-form-item label="项目图片" prop="pic">
                        <el-upload
                          ref="upload"
                          action="#"
                          :http-request="uploadFileceshi"
                          :before-upload="beforeUploadceshi"
                          :auto-upload="true"
                          :limit="10"
                          :on-exceed="handleExceedceshi"
                          v-model="tableData71.pic">
                          <el-button size="small" type="primary">
                            新增项目数据图片
                            <i class="el-icon-upload el-icon--right"></i>
                          </el-button>
                          <template slot-scope="scope">
                            <el-link>{
  
  { scope.row.pic}}</el-link>
                          </template>
                        </el-upload>

                        <el-button @click="handlePreviewceshi" title="预览图片">预览图片</el-button>
                        <el-dialog title="图片预览" :visible.sync="previewDialogVisibleceshi" width="80%">
                          <el-carousel   type="card"  :interval="5000">
                            <el-carousel-item v-for="(item, index) in previewImageListceshi" :key="index">
                              <el-image :src="item.src" style="width: 100%;height: 100%;" />
                            </el-carousel-item>
                          </el-carousel>
                        </el-dial

最低0.47元/天解锁文章