您的位置:首页 > Web前端 > Vue.js

vue使用elementui无法本地预览图片问题解决

2020-06-07 04:30 501 查看

问题描述:
使用elementui中的el-upload进行本地图片预览时,预览不显示图片。
解决方法上代码:

<template>
<div class="app-container" style="padding: 8px;">
<!-- 工具栏 -->
<div class="head-container">
<template>
<!-- 上传 -->
<el-button
v-permission="permission.add"
class="filter-item crud-opts-right"
size="mini"
type="primary"
icon="el-icon-plus"
@click="dialog = true"
>
新增
</el-button>
</template>
<el-dialog
:visible.sync="crud.status.detail > 0"
:title="crud.status.title"
:close-on-click-modal="false"
append-to-body
width="500px"
>
<img :src="crud.detail.url" class="detail">
</el-dialog>
<!-- 文件上传 -->
<el-dialog :visible.sync="dialog" :close-on-click-modal="false" append-to-body width="500px" @close="close">
<el-form ref="form" :model="form" :rules="rules" size="small">
<el-form-item label="编辑人" prop="editor">
<el-input v-model="form.editor" style="width: 370px;" />
</el-form-item>
<el-form-item label="轮播背景图片" prop="fileUrl">
<el-upload
v-model="form.fileUrl"
:on-error="handleError"
:show-file-list="false"
class="avatar-uploader"
:limit="1"
:before-upload="beforeupload"
:on-change="handlePictureCardPreview"
accept="image/png,image/gif,image/jpg,image/jpeg"
action="aaa"
>
<img v-if="dialogImageUrl" :src="dialogImageUrl" class="avatar">
<i v-if="!dialogImageUrl" class="el-icon-plus avatar-uploader-icon" />
<!-- <el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" style="display: block;" class="el-upload__tip">请勿上传违法文件,且文件不超过30M</div>-->
</el-upload>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="doSubmit">确认</el-button>
</div>

</el-dialog>
<!--表格渲染-->
<el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
<el-table-column
label="序号"
type="index"
/>
<el-table-column v-if="columns.visible('url')" prop="url" :show-overflow-tooltip="true" align="center" label="图片">
<template slot-scope="scope">
<el-image :src="scope.row.url" style="width: 250px; height: 40px;" fit="scale-down" />
</template>
</el-table-column>
<!--<el-table-column v-if="columns.visible('name')" prop="name" :show-overflow-tooltip="true" label="文件名1">
<template slot-scope="scope">
<a href="JavaScript:" class="el-link el-link&#45;&#45;primary" target="_blank" type="primary" @click="download(scope.row.id)">{{ scope.row.key }}</a>
</template>
</el-table-column>-->
<el-table-column prop="updateTime" label="发布时间">
<template slot-scope="scope">
<span v-if="scope.row.publishStatus">{{ parseTime(scope.row.updateTime) }}</span>
</template>
</el-table-column>
<el-table-column v-if="columns.visible('editor')" prop="editor" label="编辑人" />
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<udOperation
:data="scope.row"
:publish-show="scope.row.publishStatus"
:permission="permission"
/>
</template>
</el-table-column>
</el-table>
<!--分页组件-->
<pagination />
</div>
</div>
</template>

<script>
import crudBanner from '@/api/system/banner'
import { mapGetters } from 'vuex'
import CRUD, { presenter, header, crud } from '@crud/crud'
import pagination from '@crud/Pagination'
import udOperation from '@crud/UD.operation'
import { uploadFormData } from '@/utils/upload'

// crud交由presenter持有
const defaultCrud = CRUD({ title: '七牛云文件', url: 'adminApi/banners', crudMethod: { ...crudBanner }})
export default {
components: { pagination, udOperation },
mixins: [presenter(defaultCrud), header(), crud()],
data() {
return {
form: { editor: '', fileUrl: '', file: {}},
uploadForm: new FormData(),
rules: {
editor: { required: true, message: '编辑人不能为空', trigger: 'blur' },
fileUrl: { required: true, message: '图片不能为空', trigger: 'blur' }
},
permission: {
del: ['admin', 'banner:list'],
add: ['admin', 'banner:list'],
publish: ['admin', 'banner:list']
},
title: '文件', dialog: false,
icon: 'el-icon-refresh',
url: '',
dialogImageUrl: '', files: [], newWin: null
}
},
computed: {
...mapGetters([
'baseApi'
])
},
watch: {
url(newVal, oldVal) {
if (newVal && this.newWin) {
this.newWin.sessionStorage.clear()
this.newWin.location.href = newVal
// 重定向后把url和newWin重置
this.url = ''
this.newWin = null
}
}
},
created() {
this.crud.optShow = {
add: false,
edit: false,
detail: true,
del: true,
delAll: false,
download: false,
publishCancel: true,
publish: true
}
},
methods: {
// 七牛云配置
doConfig() {
const _this = this.$refs.form
_this.init()
_this.dialog = true
},
// 图片预览
handlePictureCardPreview(file) {
this.dialogImageUrl = (window.URL) ? window.URL.createObjectURL(file.raw) : window.webkitURL.createObjectURL(file.raw)
this.form.fileUrl = this.dialogImageUrl
this.form.file = file
},
close() {
this.form = {}
this.dialogImageUrl = ''
this.dialog = false
this.crud.toQuery()
},
// 刷新列表数据
doSubmit() {
const that = this
this.$refs['form'].validate((valid) => {
if (valid) {
that.uploadForm.append('file', that.form.file.raw)
that.uploadForm.append('editor', that.form.editor)
return uploadFormData(that.baseApi + '/adminApi/banners', that.uploadForm).then(res => {
this.crud.notify('保存成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
that.close()
}).catch(err => {
console.log(err.data.message)
})
}
})
},
// 监听上传失败
handleError(e, file, fileList) {
const msg = JSON.parse(e.message)
this.crud.notify(msg.message, CRUD.NOTIFICATION_TYPE.ERROR)
},
// 阻止upload的自己上传,进行再操作
beforeupload() {
return false
}
}
}
</script>

<style scoped>
.crud-opts-right {
float: right;
}
.avatar-uploader i {
border: 1px dashed #cfcfcf;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader i:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 78px;
height: 78px;
line-height: 78px;
text-align: center;
}
.avatar {
width: 78px;
height: 78px;
display: block;
}
.detail {
width: 460px;
height: 500px;
display: block;
}
</style>

详细解释:

// 图片预览
handlePictureCardPreview(file) {
this.dialogImageUrl = (window.URL) ? window.URL.createObjectURL(file.raw) :
window.webkitURL.createObjectURL(file.raw)
this.form.fileUrl = this.dialogImageUrl
this.form.file = file
},

注意上方代码中的 this.dialogImageUrl = (window.URL) ? window.URL.createObjectURL(file.raw) :window.webkitURL.createObjectURL(file.raw) 其中createObjectURL(file.raw)一定要用file里面的raw属性才可以进行回显!elementui上面的示例也是错的!

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐