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
    }
  }
}