若依框架图片上传

一、表格显示地方需要改动的地方

 <el-table-column label="品牌logo地址" align="center" prop="logo" >
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="pjtUrl+scope.row.logo"
            >
          </el-image>
        </template>
      </el-table-column>

这个地方的logo就是你实体类中的图片地址 

二、新增或者修改时弹出的对话框

<el-form-item label="图片地址" prop="logo" label-width="40">
          <el-upload
            :action="imgUpload.url"
            :headers="imgUpload.headers"
            list-type="picture-card"
            :limit="limit"
            :on-exceed="handleExceed"
            :on-success="handlePictureSuccess"
            :before-upload="beforeAvatarUpload"
            :on-preview="handlePictureCardPreview"
            :file-list="fileList"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" v-if="imageUrl" :src="imageUrl" alt="一个图片">
          </el-dialog>
        </el-form-item>

三、需要导入的文件

import { getToken } from "@/utils/auth";

四、data部分

pjtUrl: process.env.VUE_APP_BASE_API,
      // 图片数量限制
      limit: 1,
      //页面上存的暂时图片地址List
      fileList: [{url: ""}],
      //图片地址
      imageUrl: "",
      dialogVisible: false,
      imgUpload: {
        // 设置上传的请求头部
        headers: {
          Authorization: "Bearer " + getToken()
        },
        // 图片上传的方法地址:
        url: process.env.VUE_APP_BASE_API + "/rechargeEquity/equity/upload",
      },

 /rechargeEquity/equity/upload这个是你的后端代码的controller层路径

五、method部分

//图片上传前的相关判断
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type == 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 5;
      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG/PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 5MB!');
      }
      return isJPG && isLt2M;
    },
    //图片预览
    handlePictureCardPreview(file) {
      this.imageUrl = file.logo;
      this.dialogVisible = true;
    },
    //图片上传成功后的回调
    handlePictureSuccess(res, file) {
      //设置图片访问路径 （fileUrl 后台传过来的的上传地址）
      this.imageUrl = file.response.logo;
      //下面是为了将图片信息存入数据库准备
      this.form.logo = file.response.logo;
    },
    // 文件个数超出
    handleExceed() {
      this.$modal.msgError(`上传链接LOGO图片数量不能超过 ${this.limit} 个!`);
    },

这个地方几乎不需要改，只需要把logo换成你们具体对应实体类中的字段 

1、表单重置需要改的地方

// 表单重置
    reset() {
      this.fileList = undefined;//加的是这一行
      this.form = {
        id: null,
        equityId: null,
        name: null,
        logo: null,
        categoryId: null,
        createTime: null,
        editTime: null,
        endTime: null,
        createBy: null,
        sort: null,
        status: null
      };
      this.resetForm("form");
    },

 这里只需要加最上面一行

2、修改按钮需要改的地方

/** 修改按钮操作 */
    handleUpdate(row) {
      this.flag=false;
      this.imageUrl =this.pjtUrl+row.logo
      const id = row.id || this.ids
      getEquity(id).then(response => {
        this.fileList = [{ url: this.imageUrl}]//加的是这一行
        this.form = response.data;
        this.form.logo=this.pjtUrl+response.data.logo;
        this.open = true;
        this.title = "修改直冲产品品牌";
      });
    },

3、提交按钮需要改的地方

 

 /** 提交按钮 */
    submitForm() {
      this.form.logo = this.imageUrl; // 注：重要(用于添加到数据库)，加的是这一行
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateEquity(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addEquity(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },

 

六、后端代码

@PostMapping("/upload")
    public AjaxResult uploadFile(MultipartFile file) throws IOException
    {
        if (!file.isEmpty())
        {
            // 上传文件路径（上传文件存放磁盘位置）
            String logo=FileUploadUtils.upload(QhfConfig.getUploadPath(),file);
            if(!StringUtils.isEmpty(logo)){
                AjaxResult ajax = AjaxResult.success();
                ajax.put("logo",logo);
                return ajax;
            }
        }
        return AjaxResult.error("上传图片异常，请联系管理员");
    }