标题
参考右边的帮助文档
单图片和多图片上传对传参和反显问题不太好处理 单图片上传: <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 }