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

效果图如下：

前端代码：

//-----------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="data: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("上传图片异常，请联系管理员");}

若依图片上传到服务器，前端显示图片相关推荐

选择相册图片上传后，客户端显示图片却是被旋转过角度
我想某位大哥也遇到过这个问题,就是手机相册选择图片时,显示是正的(未被旋转角度的),但是上传该图片后,客户端却显示被旋转了xx度的.那这肯定是客户不想出现的问题,同样也是我们开发者不想出现bug.我想 ...
html5 java 图片上传_java实现图片上传至服务器并显示，如何做？希望要具体的代码实现...
展开全部有两种方法一是用上传的组建jspSmartUpload的Request, 还有一种不用组建,但在e69da5e6ba9062616964757a686964616f3133323865323 ...
php如何把图片上传到mysql并显示图片到前段页面？
在做一个电影订票系统,需要存储图片到数据库然后显示出来,网上找了很多法子都不行,求各位大佬支招#php#mysql
vue 富文本 quill 编辑器，实现图片上传到服务器，以及实时字数统计
vue 富文本 quill 编辑器,实现图片上传到服务器,以及实时字数统计写在前面 vue 富文本 quill / vue-quill-editor 如何使用图片上传到服务器实时字数统计图片编 ...
上传文件服务器怎么做,图片上传到服务器后怎么生成可直接访问的链接
我在客户端做头像上传,图片上传到服务器后保存在一个固定的文件夹内,现在我如何在客户端读取到这张图片. 运行环境是后端是node koa 相关代码exports.editcover = async (c ...
使用canvas给图片添加水印， canvas转换base64,,canvas，图片，base64等转换成二进制文档流的方法，并将合成的图片上传到服务器,...
一,前端合成带水印的图片一般来说,生成带水印的图片由后端生成,但不乏有时候需要前端来处理.当然,前端处理图片一般不建议,一方面js的处理图片的方法不全,二是有些老版本的浏览器对canvas的支持度不 ...
微信小程序如何把图片上传至服务器
微信小程序如何把图片上传至服务器前些日子接了个任务就是开发一个小程序,遇到了一个问题就是需要图片上传至服务器并保存记录,遵循着解决思路我们先从最开始入手 1:微信上传接口 2:服务器接收接口 3:保 ...
Android简单实现将手机图片上传到服务器中
在本例中,将会简单的实现安卓手机将图片上传到服务器中,本例使用到了服务器端:PHP+APACHE 客户端:JAVA 先简单实现一下服务器端的上传并测试上传效果,看实例 <?php if(emp ...
php微信小程序多图上传,tp5实现微信小程序多图片上传到服务器功能
最近在做一个教育类的小商城的微信小程序,用到了上传多个图片文件到服务器端,这里做一个讲解,希望对大家有所帮助. 1,小程序端: 在wxml文件中: 删除点击上传作业在js文件中: Page({ / ...
vue上传图片文件到服务器,vue如何将quill图片上传到服务器
通过自定义quill图片上传按钮,实现将图片上传服务器,并插入服务器地址. export default { name: "editor", props: ['content'], ...

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

若依图片上传到服务器，前端显示图片相关推荐

最新文章

热门文章