vue图片上传案例

it2025-01-14  8

这里写自定 提示:文章写完后,目录可以自动生成,如何生成可

项目场景:问题描述: 提示:文章写完后,目录可以自动生成,如何生成可

标题

参考右边的帮助文档

项目场景:

图片上传

问题描述:

单图片和多图片上传对传参和反显问题不太好处理 单图片上传: <el-upload ref=“upload” :auto-upload=“true” :limit=“1” action=“dev-api/XXX” :on-success=“handleSuccess” :on-remove=“handleRemove” :file-list=“fileList” list-type=“picture-card” :before-upload=“beforeUpload” accept=“jpg,png”

// 获取上传图片成功后的信息 handleSuccess(res) { // 获取图片上传成功后的信息 const preUrl = uploadPrefix + res.data.filePath // 为表单数据赋值 this.addEditResourceForm.regionBackContent = preUrl }, // 校验图片格式 beforeUpload(file) { const testmsg = file.name.substring(file.name.lastIndexOf(’.’) + 1) const extension = testmsg === ‘jpg’ const extension2 = testmsg === ‘png’ if (!extension && !extension2) { this.$message({ message: ‘上传背景只能是jpg,png格式的图片’, type: ‘warning’ }) } return extension || extension2 }, // 删除图片 handleRemove(file, fileList) { console.log(file, fileList) } 多图片上传: <el-upload ref=“upload” :auto-upload=“true” action=“dev-api/xxx” :file-list=“fileList” :before-upload=“beforeUpload” :on-success=“handleSuccess” :on-remove=“handleRemove” list-type=“picture-card”

<i class="el-icon-plus" /> 支持JPG、PNG等图片格式

// 获取上传图片后的信息 handleSuccess(res) { const preUrl = uploadPrefix + res.data.filePath this.fileListArray.push(preUrl) this.fileList.push({ url: preUrl }) this.addArticleForm.pcPicture = this.fileListArray.join() }, // 删除图片 handleRemove(file, fileList) { this.fileList = fileList }


最新回复(0)