admin 管理员组

文章数量: 887021

图片上传

若依提供的组件和工具来实现图片上传功能例在前端页面中添加一个上传按钮和一个隐藏的 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 元素的点击事件。

本文标签： 图片上传

版权声明：本文标题：图片上传 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1687529587h112598.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。