實現的效果如下:
使用的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
}
}
}