Springboot框架实现图片上传显示并保存地址到数据库

引用别人的例子,写的很好
点击跳转

下面是自己的实践,记录学习过程,提交多种数据格式(JSON,String)时,可以分开处理:
对于图片和form其他更新提交的数据,分为两部分进行解决,先上传图片到我们本地文件夹位置,然后在将对应的文件路径返回到前端,前端就可以查看图片了了,同时数据库也存在图片了。

返回前台图片存储的地址,并将地址赋值。然后在更新数据,存储在数据库中
controller层

  @RequestMapping(value = "/addpicture")
    public String uploadFile(MultipartFile file,DrugInfo drugInfo) throws IOException { 
        /** * 上传图片 */
        System.out.println(drugInfo.getLogo());
        //图片上传成功后,将图片的地址写到数据库
        //保存图片的路径(这是存在我项目中的images下了,你们可以设置路径)
        String filePath = "自己的文件地址";
        //获取原始图片的拓展名
        String originalFilename = file.getOriginalFilename();
        //新的文件名字
        String newFileName = UUID.randomUUID() + originalFilename;
        //封装上传文件位置的全路径
        File targetFile = new File(filePath, newFileName);
        //把本地文件上传到封装上传文件位置的全路径
        file.transferTo(targetFile);
        drugInfo.setLogo("http://localhost:8080/biyedrug/images/" + newFileName);
        return drugInfo.getLogo();
    }

element的upload
部分代码如下:

<el-upload
                  action="http://localhost:8080/biyedrug/druginfo/addpicture"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                  :limit="imgLimit"
                  :show-file-list="true"
                  :on-success="onSuccess"
                  :on-exceed="handleExceed"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
              </el-dialog>

处理方法部分代码如下:

<template>
  <div>
    <el-form
        class="detail-form-content"
        ref="ruleForm"
        :model="ruleForm"
        label-width="80px"
    >
 
      <el-row>
        <el-col :span="24">
          <el-form-item v-if="type!='info'" label="logo" prop="logo">
            <img v-if="ruleForm.logo" :src="ruleForm.logo" class="avatar" style="width: 50%">
            <div v-else>
              <el-upload
                  action="http://localhost:8080/biyedrug/druginfo/addpicture"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                  :limit="imgLimit"
                  :show-file-list="true"
                  :on-success="onSuccess"
                  :on-exceed="handleExceed"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
              </el-dialog>
            </div>
          </el-form-item>
          <div v-else>
            <el-form-item v-if="ruleForm.logo" label="logo" prop="logo">
              <img style="margin-right:20px;" v-bind:key="index"
                   v-for="(item,index) in ruleForm.logo.split(',')" :src="item" width="100" height="100">
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <el-row style="margin-left: 80px;margin-bottom: 20px">
        <el-col :span="12" v-if="type!='info'">
          <el-row>
            <el-button type="danger" v-if="ruleForm.logo!=''" @click="deletepicture">删除图片</el-button>
            <el-button type="primary" v-if="ruleForm.logo==''">上传图片</el-button>
          </el-row>
        </el-col>
      </el-row>
  </div>
</template>
<script>
export default { 
  data() { 
    return { 
      
      dialogImageUrl: '',
      dialogVisible: false,
      imgLimit: 1
    };
  },
  methods: { 
    
    },
   
    handleRemove(file, fileList) { 
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) { 
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 图片上传成功后,后台返回图片的路径
    onSuccess: function (res) { 
      console.log(res);
      console.log(res);
      this.dialogImageUrl = res;
    },

    /**文件超出个数限制时的钩子 */
    handleExceed() { 
      this.$message.error(`只能选择${ this.imgLimit}个文件`);
    },

  }
};
</script>
<style scoped>
.editor { 
  height: 500px;
}
</style>

然后也就实现了图片的上传
未写完,明天完善

    原文作者:程序猿向前跑
    原文地址: https://blog.csdn.net/qq_46199553/article/details/121889067
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞