vue前端实现批量上传图片功能并回显图片
作者：凉柚ˇ
核心功能实现
在Vue组件的data函数中定义一个数组来存储选中的文件，并在methods中添加一个方法来处理文件选择事件。
methods: {
updateImgs(fieldname) {
const inputFile = document.createElement('input')
inputFile.type = 'file'
inputFile.accept = 'image/*' // 只接受图片文件
inputFile.multiple = true // 允许选择多个文件
inputFile.click() // 触发文件选择对话框
inputFile.onchange = async (e) => {
const files = e.target.files // 获取所有选中的文件
if (!files.length) return // 如果没有选中文件，直接返回
// 遍历每个文件
for (let i = 0; i < files.length; i++) {
const file = files[i]
const fileSizeMB = file.size / (1024 * 1024) // 转换为MB
if (fileSizeMB > 2) {
// 文件大小超过2MB，显示提示信息
this.$message.error(`文件 ${file.name} 大小不能超过2MB`)
continue // 跳过当前文件，继续检查下一个文件
}
// 使用 FormData 来构建上传的数据
const formData = new FormData()
formData.append('file', file)
try {
const { data: res } = await uploadFile(formData) // 你的配置后的上传图片接口
//根据接口返回存图片的url 例this.xxx = res，之后应用到你的新增/编辑接口
this.reportData.projimplement.imglist.push({
url: res.data.filePath,
description: file.name
})
} catch (error) {}
}
}
},
getFullImageUrl(relativePath) {
// 结合服务器前缀和相对路径
return `${this.serverPrefix}${relativePath}`
},
getPreviewList(imgList) {
// 显示图片组
return imgList.map((item) => this.getFullImageUrl(item.url))// 你的结构
}
}
实现了以下功能：
0.创建文件输入元素：使用document.createElement创建一个新的元素，类型设置为file，并且设置了accept属性来限制用户只能选择图片文件，同时设置了multiple属性允许用户选择多个文件。
1.触发文件选择对话框：通过调用inputFile.click()方法，模拟用户点击文件输入框，从而触发操作系统的文件选择对话框。
2.处理文件选择：通过监听inputFile元素的onchange事件，当用户选择了文件后，事件处理函数会被触发。
3.文件大小检查：在事件处理函数中，首先获取所有选中的文件，然后遍历这些文件，检查每个文件的大小是否超过2MB。如果文件大小超标，则显示错误提示并跳过该文件。
4.构建FormData：对于每个符合大小要求的文件，使用FormData对象来构建一个表单数据对象，并将文件附加到这个对象中。
5.异步上传文件：使用async/await语法，调用uploadFile函数（这个函数没有在代码中定义，可能是组件的另一个方法或者外部服务）来异步上传文件。uploadFile函数接收一个FormData对象作为参数，并返回一个包含上传结果的Promise。
6.处理上传结果：如果上传成功（res.success为true），则根据传入的fieldname参数，将文件路径添加到组件的相应数据属性中。之后显示成功消息。
7.错误处理：如果上传过程中出现错误，catch块会捕获异常，但当前的实现中并没有做任何错误处理，只是简单地忽略了错误。
HTML部分
<div style="position: relative">
<el-button class="upimg_but" type="primary" size="small" @click="updateImgs"
>上传</el-button
>
<div class="img-block">
<div class="img-box" v-for="(item, index) in reportData.projimplement.imglist" :key="index">
<el-tooltip effect="dark" :content="item.description" placement="bottom">
<el-image
style="width: 150px; height: 150px"
:src="getFullImageUrl(item.url)"
fit="contain"
lazy
:preview-src-list="getPreviewList(reportData.projimplement.imglist)"
></el-image>
</el-tooltip>
<i class="el-icon-delete" style="cursor: pointer" @click="deleteImg(index)"></i>
</div>
</div>
</div>
CSS部分
.img-block {
padding-top: 30px;
max-height: 320px;
display: flex;
flex-wrap: wrap;
overflow-y: auto;
&::-webkit-scrollbar-track-piece {
background: #e4e4e4;
}
&::-webkit-scrollbar {
width: 4px;
height: 8px;
}
&::-webkit-scrollbar-thumb {
background: #c2c2c2;
border-radius: 20px;
}
.img-box {
width: 33%;
text-align: center;
margin: 8px 0;
}
}
效果预览
ps：请注意，上述代码只是一个示例，实际应用中你可能需要根据具体需求调整样式、上传逻辑和错误处理等。此外，确保后端API能够正确处理批量上传的文件。