Modal [[官方文檔-modal]](https://bootstrap-vue.js.org/docs/components/modal/#comp-ref-b-modal) ---- [TOC] ---- ## Confirm message box ~~~javascript //.vue中 //異步處理文件上傳 export default { methods:{ uploadFile:async function(obj,event){ //event.preventDefault //console.log(event.target) //var inputFile=null let self=this let url=[self.host,self.actItem.sysEnt,'uploadFile',obj.id].join('/') let req=Object.assign({},self.request) let file=req.load //異步引入TheFormFile組件 const {default:formFileCom}=await Promise.resolve(import('@/components/TheFormFile')) //引入定義好的渲染函數 const h = self.renderFunc() /*const bodyVNode = h('p', { class: ['text-center'] }, [ h('strong', {}, obj.id) ])*/ /* const bodyVNode=h('b-form-file', { class: ['text-center'] }, [ h('strong', {}, obj.id) ]) */ //TODO: h(formFileCom) ? //使用渲染函數進行BSV的msgBoxConfirm組件關鍵部分的渲染 /* const bodyVNode = h(formFileCom,{ props: { file: null }, on:{ input-file:function(){ return this.file } }, }) */ const bodyVNode = h(formFileCom) const titleVNode = h('div', { domProps: { innerHTML: '上傳<strong> '+obj.name+' </strong>照片？' } }) //得到BSV的msgBoxConfirm組件的按鈕值 let modalVal=await self.$bvModal.msgBoxConfirm([bodyVNode], { title:[titleVNode], size: 'sm', buttonSize: 'sm', okVariant: 'primary', okTitle: '是', cancelTitle: '否', footerClass: 'p-2', hideHeaderClose: false, centered: true }) let res={'status':0} let data={success:false} //console.log(event.target.id) if(modalVal){ const formData = new FormData() console.log(file) //定義后端提取文件的名稱：fileObj formData.append('fileObj', file) //向后端上傳文件 //使用formData上傳文件，method必須為‘PSOT’ res=await fetch(url,{ method:'POST', body:formData }) } //后端成功處理 if(res.status=='200'){ //得到后端發回的數據 data=await res.json() } console.log(data) console.log(event) //TODO: change b-img src prop sync? //更新event.target.src if(data.success){ //event.target.src=data.dir+data.name event.target.src=self.setImgSrc(data) } await self.$nextTick() console.log(event.target.src) console.log(event.target.currentSrc) /* self.$bvModal.msgBoxConfirm([bodyVNode], { title:[titleVNode], size: 'sm', buttonSize: 'sm', okVariant: 'primary', okTitle: '是', cancelTitle: '否', footerClass: 'p-2', hideHeaderClose: false, centered: true }) .then(value => { let url=[self.host,self.actItem.sysEnt,'uploadPic',obj.id].join('/') let req=Object.assign({},self.request) let file=req.load //let file1=new File() console.log(value) console.log(file) //console.log(file1) //按下的是‘ok’ //if(value && file.name){ if(value){ const formData = new FormData() formData.append('image', file) console.log(url) console.table(file) console.log(formData) //使用formData上傳文件，method必須為‘PSOT’ return fetch(url,{ method:'POST', body:formData }) } if(!value){ req.load={} console.log(file) return self.updateFetchCont({request:req}) } }) .then(res=>{ if(res.status=='200'){ return res.json() } }) .then(obj=>{ console.log(obj) }) .catch(err => { // An error occurred return err }) */ }, }, } ~~~