vue使用element-ui上传多张图片及回显
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
效果:
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 debug
Message({
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-upload
action="#"
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.uid
createStorage(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 < 2
if (!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.url
this.dialogVisible = true
},
/**
* 清空上传组件
*/
emptyUpload() {
const mainImg = this.$refs.upload
if (mainImg) {
if (mainImg.length) {
mainImg.forEach(item => {
item.clearFiles()
})
} else {
this.$refs.upload.clearFiles()
}
}
}
stringboot后台接收参数返回图片url即可
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献3条内容
所有评论(0)