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

问题描述：
使用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上面的示例也是错的！