vue使用element-ui上传多张图片及回显

效果：

vue封装上传接口：storage.js

import axios from 'axios'
import { Message } from 'element-ui'
const service = axios.create({baseURL: process.env.OS_API // api的base_url
})
service.interceptors.response.use(response => {return response}, error => {console.log('err' + error)// for debugMessage({message: '对象存储服务访问超时，请检查链接是否能够访问。',type: 'error',duration: 5 * 1000})return Promise.reject(error)})export function createStorage(data) {return service({url: '/storage/create',method: 'post',data})
}
}

需要使用图片上传的地方引用

import { createStorage } from '@/api/storage'

我使用的地方是在from中

<el-form-item label="文章展示图" prop="picture" style="width: 800px;"><el-uploadaction="#"list-type="picture-card":on-preview="handlePictureCardPreview":on-remove="handleRemove":http-request="uploadAvatar":before-upload="beforeAvatarUpload":file-list="fileList"><i class="el-icon-plus"></i></el-upload><el-dialog :visible.sync="dialogVisible"><img width="100%" :src="dialogImageUrl" alt=""></el-dialog></el-form-item>

data中

          dialogImageUrl: '',dialogVisible: false,picList: [],fileList: []

方法区，包含了文件上传到服务器，展示大图，删除等功能

uploadAvatar(item) {const formData = new FormData()formData.append('file', item.file)const uid = item.file.uidcreateStorage(formData).then(res => {this.picList.push({ key: uid, value: res.data.data.url })this.emptyUpload()}).catch(() => {this.$message.error('上传失败，请重新上传')this.emptyUpload()})},beforeAvatarUpload(file) {const isJPG = file.type === 'image/jpeg'const isPng = file.type === 'image/png'const isLt2M = file.size / 1024 / 1024 < 2if (!isJPG && !isPng) {this.$message.error('上传图片只能是 JPG或png 格式!')}if (!isLt2M) {this.$message.error('上传图片大小不能超过 2MB!')}return (isJPG || isPng) && isLt2M},handleRemove(file, fileList) {for (const i in this.picList) {if (this.picList[i].key === file.uid) {this.picList.splice(i, 1)}}},handlePictureCardPreview(file) {this.dialogImageUrl = file.urlthis.dialogVisible = true},/*** 清空上传组件*/emptyUpload() {const mainImg = this.$refs.uploadif (mainImg) {if (mainImg.length) {mainImg.forEach(item => {item.clearFiles()})} else {this.$refs.upload.clearFiles()}}}

stringboot后台接收参数返回图片url即可

vue使用element-ui上传多张图片及回显相关推荐

实现element ui上传一张图片
1.1 功能描述之前项目需求会使用element ui组件中的el-upload上传一张图片.因为界面只能存在一张图片,所以上传一张图片成功之后,需要隐藏上传按钮. 2.1 主要考点 2.1.1 运 ...
Element UI 上传一张图片后隐藏上传按钮
el-upload里面绑定一个占位class: :class="{hide:hideUpload}" data里面初始化: hideUpload: false, limitCoun ...
vue+elemnt ul 图片上传隐藏按钮+图片回显
技术栈: vue2.6 +element 需求:在弹窗中实现图片上传,上传之后隐藏上传按钮,实现放大和删除功能,修改时回显图片. 具体实现效果如图所示: 1.隐藏上传按钮在el-upload中绑定一 ...
Vue+element ui 上传视频
直接上代码 (利用了阿里云浏览器直传方式) <el-form-item label="视频:" :label-width="formLabelWidth" ...
Element UI 上传组件实现文件上传并附带额外参数
1. 需求在使用 ElementUI 的上传组件 el-upload 实现文件上传功能时,如果单文件上传是比较简单的,但是在实际需求中,往往会在上传文件时伴随着一些其他参数,效果如下图: 在上传指定 ...
java 图片回显_java实现Simditor图片上传七牛云并回显
首先呢,我们有这样一个需求: 当图片上传Simditor时,将其保存到七牛云上,然后并回显在我们的Simditor中. 首先,需要我们有一个七牛云帐号,并且配置Simditor富文本编辑器. 其次,我 ...
最简单的js实现上传头像并正常回显
既然有上传头像功能,那用户肯定得选择完照片后显示出来, 废话不多说,下面就是提供一段简单的代码来实现,希望对大家也有帮助: h5 部分 <div class=&qu ...
图片上传本地预览(回显)插件
图片上传本地预览插件,本示例只是静态页面,请下载完整的示例查看请下载完整的js和css样式,以及Demo <html><title>文件上传</title>< ...
解决element ui select下拉框不回显数据问题
最近在做一个项目,项目的后端是地址: https://github.com/wangyuanjun008/wyj-springboot-security.git 前端地址是 https://githu ...

vue使用element-ui上传多张图片及回显

效果：

vue封装上传接口：storage.js

需要使用图片上传的地方引用

vue使用element-ui上传多张图片及回显相关推荐

最新文章

热门文章