图片上传_RuoYi

若依提供的组件和工具来实现图片上传功能例在前端页面中添加一个上传按钮和一个隐藏的 input 元素，并使用 element-ui 组件库提供的 el-upload 组件创建一个上传组件。

<template><el-uploadclass="upload-demo":action="uploadUrl":headers="uploadHeaders":file-list="fileList":auto-upload="false":on-change="handleFileChange":before-upload="beforeUpload"><el-button slot="trigger" size="small" type="primary">上传图片</el-button><div slot="tip" class="el-upload__tip">只能上传 jpg/png 文件，且不超过 2MB</div></el-upload><!-- 隐藏的 input 元素 --><inputtype="file"ref="fileInput"style="width: 0; height: 0; border: none; margin: 0; padding: 0;"@change="handleFileInputChange"/>
</template>

在这个示例中，我们为 el-upload 组件绑定了一些属性，包括上传地址、请求头、上传文件列表、自动上传等。我们还为上传按钮绑定了一个点击事件，用于触发隐藏的 input 元素的点击事件。当用户选择了要上传的图片文件时，隐藏的 input 元素的 change 事件将触发 handleFileInputChange() 函数。

2.在 Vue 组件中定义 uploadUrl、uploadHeaders 和 fileList 等属性，并编写 beforeUpload() 和 handleFileChange() 等方法，用于实现图片上传功能。

<script>
import { uploadFile } from "@/api/common";export default {data() {return {// 图片上传地址uploadUrl: "/common/upload",// 图片上传请求头uploadHeaders: { "Authorization": "Bearer " + getToken() },// 图片文件列表fileList: []};},methods: {// 文件上传前的校验beforeUpload(file) {const isJPG = file.type === "image/jpeg" || file.type === "image/png";const isLt2M = file.size / 1024 / 1024 < 2;if (!isJPG) {this.$message.error("上传的图片只能是 JPG/PNG 格式！");}if (!isLt2M) {this.$message.error("上传的图片大小不能超过 2MB！");}return isJPG && isLt2M;},// 选择文件后触发handleFileChange(file, fileList) {const formData = new FormData();formData.append("file", file.raw);uploadFile(formData).then(response => {this.$message.success("上传成功！");const url = response.data.url;const image = {name: file.name,url: url};this.fileList.push(image);}).catch(error => {this.$message.error("上传失败！");console.log(error);});},// 触发隐藏的 input 元素的点击事件showFileInput() {this.$refs.fileInput.click();}}
};
</script>

使用了若依提供的 uploadFile() 方法，将文件上传到服务器，并将上传后的返回值中的图片 URL 添加到 fileList 中。

beforeUpload() 方法，用于校验上传的文件是否符合要求。

上传文件不符合要求，提示用户错误信息。

showFileInput() 方法，用于触发隐藏的 input 元素的点击事件。

图片上传_RuoYi相关推荐

html显示数据库图片django,django将图片上传数据库后在前端显式的方法
1.使用ImageField先安装pillow模块 pip install pillow 2.在app的models中设置 class Image(models.Model): pic_name=mo ...
yii2框架原生的结合框架使用的图片上传
首先我们要从model层开始写起,主要是为了创建验证规则,还有图片上传的路径以及图片的命名规则(UploadForm.php) 接下来我们要在控制器层写好业务逻辑,就是什么情况下直接在调用model层 ...
java flex 图片上传_flex上传图片到java服务器
今天弄flex上传图片到java,现在弄成功,中间也经常一点小波折,现记录一下.重点在java侧的实现. flex侧:文件上载到在url参数中传递的URL.该URL必须是配置为接受上载的服务器脚本.F ...
js表单提交，支持图片上传，包含后端php代码
微信小程序开发交流qq群 581478349 承接微信小程序开发.扫码加微信. <html><head><meta http-equiv="Conte ...
ckeditor finder php,CKEDITOR CKFINDER的图片上传配置(C#/asp.net/php)
CKEDITOR+CKFINDER的图片上传配置(C#/asp教程.net/php教程) php keditor的代码全部重写,但里面没有了上传功能,只是一个纯粹的文件在线编辑器,如果需要上传图片,还 ...
图片上传(加水印、缩略图、远程保存）的简单例子
图片上传(加水印.缩略图.远程保存)的简单例子(应用于51aspx.com) 该源码下载地址:http://51aspx.com/CV/ImageUpload 今天看到xiongeee发的文章使用使用 ...
使用summernote实现复制图片即可实现图片上传
个人资源与分享网站:http://xiaocaoshare.com/ 1.页面结构 <script src="../statics/js/plugins/summernote/summ ...
js实现图片上传本地预览
演示地址:https://xibushijie.github.io/static/uploadImg.html <!DOCTYPE> <html><head>< ...
SpringBoot 2.0 多图片上传加回显
点击上方蓝色"方志朋",选择"设为星标" 回复"666"获取独家整理的学习资料! 本文来源:http://r6f.cn/crEY 这两天公司 ...

图片上传_RuoYi

图片上传_RuoYi相关推荐

最新文章

热门文章