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--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上面的示例也是错的!
相关文章推荐
- IE7在图片上传时,无法预览本地图片的问题解决方法
- HTML5异步上传图片(支持预览和进度条),使用其他按钮触发file onclick事件,解决某些浏览器无法触发的问题
- 解决webapp中使用cordova调用本地相册,在ios设备上无法显示图片的问题
- IE7在图片上传时,无法预览本地图片的问题解决方法
- [Vue2.0使用问题及其解决] 图片无法正常显示
- 解决kindeditor与Struts2框架整合时无法上传本地图片的问题 (2)
- 解决kindeditor与Struts2框架整合时无法上传本地图片的问题
- ubuntu下使用eclipse调试jni无法获取环境变量,本地库(java.library.path,LD_LIBRARY_PATH)等问题的解决。
- 使用LRUCACHE解决加载本地大量图片卡顿及OOM问题
- 【解决Win7缩略图预览功能无法使用问题】
- 解决tmpl插件与图片自动轮播插件结合使用,无法加载mytv()方法问题
- 解决微信及360浏览器无法读取本地图片问题
- img标签src使用网络地址展示图片,https。。无法显示,404 问题解决办法
- javascript firefox不显示本地预览图片问题的解决方法
- 解决getAsDataURL在Firefox7.0 无法预览本地图片 发布于 2011 年 10 月 15 日 by 阿望 没有评论发表评论
- 细谈 Web Api 图片上传,在使用 Task.ContinueWith 变量无法赋值问题的解决办法!
- IE8 用滤镜实现上传预览图片,解决C:\fakepath\*.jpg问题,获取本地路径
- ImageView中无法加载显示本地SDCard图片问题的解决方法
- html的img中使用SVG图片做SRC在本地测试可用但是上传服务器后不能显示问题解决 标签: SVGMIME TYPE不显示服务器设置 2016-05-21 13:49 2517人阅读 评论(0)
- Android中使用file.createNewFile()无法创建文件的问题(例如保存拍照的图片到本地)