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

图片上传到服务器，前端显示图片"/>

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

效果图如下：

 前端代码：

//-----------table显示图片<el-table-column label="图片地址" align="center" prop="url" ><template slot-scope="scope"><el-imagestyle="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,//页面上存的暂时图片地址ListfileList: [{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.idsgetPicture(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("上传图片异常，请联系管理员");}