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>

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