若依图片上传到服务器，前端显示图片

效果图如下：

 前端代码：

//-----------table显示图片
 <el-table-column label="图片地址" align="center" prop="url" >
        <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="pjtUrl+scope.row.url"
              :fit="fit">
            </el-image>
        </template>
 </el-table-column>
//-----------新增或修改方法里上传图片
  <el-form-item label="图片地址" prop="url" 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>
//--------导入token
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 + "/business/picture/articleImg",
  },
//-----------方法
 // 表单重置
  reset() {
      this.fileList = undefined;//加的是这一行
      this.form = {
        id: null,
        name: null,
        url: null
      };
      this.resetForm("form");
    },
   /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getPicture(id).then(response => {
        this.fileList = [{ url: process.env.VUE_APP_BASE_API + response.data.url}]//加的是这一行
        this.form = response.data;
        this.open = true;
        this.title = "修改图片信息";
      });
    },
  /** 提交按钮 */
    submitForm() {
      this.form.url = this.imageUrl; // 注：重要(用于添加到数据库)，加的是这一行
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updatePicture(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addPicture(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },

  //图片上传前的相关判断
    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.url;
      this.dialogVisible = true;
    },
    //图片上传成功后的回调
    handlePictureSuccess(res, file) {
      //设置图片访问路径 （url 后台传过来的的上传地址）
      this.imageUrl = file.response.url;
    },
    // 文件个数超出
    handleExceed() {
      this.$modal.msgError(`上传链接LOGO图片数量不能超过 ${this.limit} 个!`);
    },

后端代码：

   /**
     * 缩略图上传
     */
    @Log(title = "预览缩略图", businessType = BusinessType.UPDATE)
    @PostMapping("/articleImg")
    public AjaxResult uploadFile(MultipartFile file) throws IOException
    {
        if (!file.isEmpty())
        {
            String articleImg = FileUploadUtils.upload(RuoYiConfig.getUploadPath(), file);
            if (!StringUtils.isEmpty(articleImg))
            {
                AjaxResult ajax = AjaxResult.success();
                ajax.put("url", articleImg);
                return ajax;
            }
        }
        return AjaxResult.error("上传图片异常，请联系管理员");
    }