vue项目通过FormData上传图片并实时显示图片,及elementUI的对话框中遇到的问题

实现的效果如下:

使用的vue脚手架版本为cli3.x,组件库为elementUI

本文章只放了关键代码,和部分注意事项

1.html的代码

  <!-- 对话框 该对话框在mounted时未被挂载-->
  <el-dialog title="title" :visible.sync="dialogFormVisible">
    <el-form :model="form">
      <el-form-item label="图片上传" :label-width="formLabelWidth">
        <div class="viewPhoto">
          <!-- 实时显示图片的容器 -->
          <img src alt ref="portrait" />
        </div>
        <!-- 提交图片文件的按钮 -->
        <input type="file" ref="saveImage" />
      </el-form-item>
      <el-form-item label="标题" :label-width="formLabelWidth">
        <el-input v-model="form.imageTitle" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="跳转链接" :label-width="formLabelWidth">
        <el-input v-model="form.toUrl" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="addEtidBannerData">确 定</el-button>
    </div>
  </el-dialog>

2.js代码

export default {
   data() {
     dialogFormVisible: false, // 对话框的默认开关
      form: {
        imageTitle: '', // banner标题
        toUrl: '' // 跳转链接
      } // 表单数据
   },
   methods: {
     // 打开添加轮播图数据的对话框
    addEditBanner() {
      this.dialogFormVisible = true
      <!-- 注意,this.$nextTick的意义在于:将回调延迟到下次 DOM 更新循环之后执行,不然会报"onchange" of null的错误,原因就是DOM还没渲染,就先执行了this.great() -->
      this.$nextTick(() => {
        // DOM 现在更新了
        // 激活实时显示图片
        this.great()
      })
     },
    // 实时显示该图片在页面
    great() {
      this.$refs.saveImage.onchange = () => {
        var imgFile = this.$refs.saveImage.files[0]
        var fr = new FileReader()
        fr.onload = () => {
          this.$refs.portrait.src = fr.result
        }
        fr.readAsDataURL(imgFile)
      }
    },
     addEtidBannerData() {
      // 获取图片的信息
      let imgData = this.$refs.saveImage.files[0]
      console.log(imgData)
      //创建一个FormData对象
      let params = new FormData()
      // 将图片的信息存进params
      params.append('file', imgData)
      // 循环把表单的内容也装进params,obj表示"键",this.form[obj]表示"键值"
      for (var obj in this.form) {
        console.log(obj, '-', this.form[obj])
        params.append(obj, this.form[obj])
      }
      console.log(params)
      // 当提交表单请求成功时,清空缓存的数据
       // 清空表单数据
        this.form = {
          imageTitle: '',
          toUrl: ''
        }
        // 清空input标签中file的值
        this.$refs.saveImage.value = ''
        // 清空实时显示的图片的值
        this.$refs.portrait.src = ''
        // 关闭对话框
        this.dialogFormVisible = false
    }
  }
}