创建一个通用图片上传处理函数JS文件，如下图importaxiosfrom'axios'import{Toast}from'vant';functionupLoaderImg(uploadUrl,file){letchooseImg=[]//选择的图片数组letparams=newFormData()if(Array.isArray(file)){//因为该组件单选是对象obj，多选是数组array，所以处理的时候要注意特殊性chooseImg=file}else{chooseImg.push(file)}chooseImg.map((item)=>{params.append('file',item.file)})params.append('action','upload')letconfig={headers:{//添加请求头'Content-Type':'multipart/form-data'}}returnnewPromise((resolve,reject)=>{axios.post(uploadUrl,params,config).then(res=>{if(res&&res.data.status==0){Toast.loading({message:'图片上传中...',forbidClick:true,loadingType:'spinner',onClose:resolve(res.data)});}else{Toast.fail({message:'图片上传异常',forbidClick:true,onClose:reject(res.data)});}}).catch(err=>{Toast.fail({message:'服务器异常',forbidClick:true,onClose:reject(err)});});})}export{upLoaderImg}导入到需要图片上传的vue文件内import*asupImgFunfrom'@/libs/util.upLoaderImg.js'van-uploader单图片上传和van-uploader多图片批量上传这里的方式尽可能的采用了vant官方的event和prop，以及样式<van-uploaderv-model="chooseImgCover":after-read="afterRead":max-count="1"upload-text="上传图片"@delete="coverDelete"/><van-uploaderv-model="chooseImgInfo":after-read="afterRead"@delete="infoDelete":max-count="5"upload-text="上传图片"multiple/>//单图片上传asyncafterReadImg(file){letupUrl=this.webapi("upAppImgs@actionImgData")letresImgData=awaitupImgFun.upLoaderImg(upUrl,file)if(status==0){this.chooseImgCover=[]letthat=thissetTimeout(function(){that.$q.notify({message:'图片上传成功',position:'top',color:'positive',timeout:1000,})},1500)}this.chooseImgCover.push(this.imgFormatJson(resImgData.actionData))this.goodsDataForm.goo_picture=resImgData.actionData.attachment},//多图片上传asyncafterReadImgs(file){letupUrl=this.webapi("upAppImgs@actionImgData")letthat=this//注意这里这个数据通过异步返回的数据区域无法使用this这个关键词，需要转换一下if(file.length>1){file.forEach(asyncfunction(item){letresImgsData=awaitupImgFun.upLoaderImg(upUrl,item)that.delImgFormat(that.chooseImgInfo)//console.log(resImgsData)that.chooseImgInfo.push(that.imgFormatJson(resImgsData.actionData))that.goodsDataForm.goo_pic.push(resImgsData.actionData.attachment)})}else{letresImgData=awaitupImgFun.upLoaderImg(upUrl,file)that.delImgFormat(that.chooseImgInfo)that.chooseImgInfo.push(that.imgFormatJson(resImgData.actionData))that.goodsDataForm.goo_pic.push(resImgData.actionData.attachment)}if(status==0){setTimeout(function(){that.$q.notify({message:'图片上传成功',position:'top',color:'positive',timeout:1000,})},1500)}console.log(that.chooseImgInfo)},//删除单图片coverDelete(file){this.goodsDataForm.goo_picture=[]},//删除多图片infoDelete(file){for(letkeyinthis.goodsDataForm.goo_pic){if(this.goodsDataForm.goo_pic.includes(file.attachment)){this.goodsDataForm.goo_pic.splice(this.goodsDataForm.goo_pic.indexOf(file.attachment),1);}}},//图片上传后显示格式转换imgFormatJson(imgData){letimgFormat={attachment:imgData.attachment,ext:imgData.ext,filename:imgData.filename,filesize:imgData.filesize,group_id:imgData.group_id,height:imgData.height,name:imgData.name,width:imgData.width,url:imgData.url,isImage:true}returnimgFormat},//后端返回来图片显示格式转换imgFormatData(backimgData,attachUrl){letformatImgs=[]if(Array.isArray(backimgData)){//因为该组件单选是对象，多选是数组formatImgs=backimgData.map(function(item,index){return{attachment:attachUrl+item,ext:"",filename:"",filesize:"",group_id:"",height:"",name:"",width:"",url:attachUrl+item,isImage:true}})}else{letformatImg={attachment:attachUrl+backimgData,ext:"",filename:"",filesize:"",group_id:"",height:"",name:"",width:"",url:attachUrl+backimgData,isImage:true}formatImgs.push(formatImg)}returnformatImgs},//图片上传完成后清除不符合标准的值delImgFormat(imgData){for(let[key,value]ofimgData.entries()){if(value.file){imgData.splice(key,1)}}},
问题描述：由于vue下支持的ES5和ES6语法，所以传统JS文件的引入不能使用原有方式的操作<scriptsrc="js的路径"><</script>VUE下ES5和ES6下的引入方式如下：<script>import{组件别名}from'../../lib/myscript.js'exportdefault{methods:{ methods1(){//该JS文件中的方法。。。。。。。。。。。。}}}</script>第二种方式引入新建JS文件示例：importaxiosfrom'axios'import{Toast}from'vant';functionupLoaderImg(uploadUrl,file){letchooseImg=[]//选择的图片数组letparams=newFormData()if(Array.isArray(file)){//因为该组件单选是对象，多选是数组chooseImg=file}else{chooseImg.push(file)}chooseImg.map((item)=>{params.append('file',item.file)})params.append('action','upload')letconfig={headers:{//添加请求头'Content-Type':'multipart/form-data'}}returnnewPromise((resolve,reject)=>{axios.post(uploadUrl,params,config).then(res=>{if(res&&res.data.status==0){Toast.loading({message:'图片上传中...',forbidClick:true,loadingType:'spinner',onClose:resolve(res.data)});}else{Toast.fail({message:'图片上传异常',forbidClick:true,onClose:reject(res.data)});}}).catch(err=>{Toast.fail({message:'服务器异常',forbidClick:true,onClose:reject(err)});});})}export{upLoaderImg}在需要引入文件的地方使用import1、全部引入import*asupImgFunfrom'@/libs/util.upLoaderImg.js';2、单个函数引入importupLoaderImgfrom'@/libs/util.upLoaderImg.js';函数的使用：upLoaderImg(this.webapi("upAppImgs@actionImgData"),file)注意：vue页面内使用函数的时候前面不要加this关键词
第一步在阿里矢量图标库将想要的图标加入购物车，然后在购物车中将图标添加到项目；下载至本地第二步组合VUE所需配置资源iconfont.css、iconfont.eto、iconfont.svg、iconfont.ttf、iconfont.woff第三步在main.js中全局引入iconfont.css。import‘./assets/iconfont/iconfont.css’之后就可以在项目中正常使用了亲测JS模式的使用好像不行,但是Unicode引用和font-class引用是肯定可以的第四步在vue代码中的使用代码如下：1、组合阿里图标库资源包assets\iconfont\下载下来的内容2、main.js文件中引入import'./assets/iconfont/iconfont.css'3、全局任何页面上均可以下两种方式使用Unicode引用<spanclass="iconfont"></span>font-class引用<spanclass="iconfonticon-xxx"></span>总结：小心引入，认真看官方demo及使用说明，大胆尝试。
通过图片上传组件的使用来描述父子组件之间的传值问题父组件向子组件传值：用prop；子组件能够改变父组件的值，是共享的，和父操作是一样的效果；子组件向父组件传值用ref，父中通过this.$refs[“*“].属性可以得到子组件的data属性值，共享，能进行更改操作；用eventBus监听事件与触发事件；自定义事件，this.$emit,发送信息下面开始详解处理过程整个逻辑思想描述1.引入自定义的全局图片管理组件<hl-imgbox></hl-imgbox>2.通过在当前页面（也就是父组件页面）创建按钮（上传图片）触发图片管理组件3.点击上传按钮弹出图片组件对话框（可以选择已上传的图片，也可以新上传图片），在图片组件内将选择好的图片通过确定选择按钮传到父组件内的图片src内4.在父组件内点击新增或者修改页面内的确定按钮将对应的图片路径保存到数据库处理父组件中的事情在父组件AddOrUpdate<add-or-updatev-if="addOrUpdateVisible"ref="addOrUpdate"@refreshDataList="getDataList"></add-or-update>中添加图片组件代码<hl-imgboxv-if="uplodImgVisible"ref="selectedImgData"@getImgsData='getImgsData'@closeImgBox='closeImgBox':multipleval="datalevelForm.multipleval"></hl-imgbox>说明：v-if=”uplodImgVisible”处理默认图片组件是否显示ref=”selectedImgData”将来父组件可以通过this.$refs[“子组件中方法或者data”]拿到子组件的数据@getImgsData=’getImgsData’监听或者接收子组件使用this.$emit(‘getImgsData’,this.selectedImgsData)传给父组件值@closeImgBox=’closeImgBox’监听或者接收子组件使用this.$emit(‘closeImgBox’,false)传给父组件值props:{multipleval:{default:false}},watch:{multipleval:{handler(val){this.options.multiple=val},immediate:true}},这里对子组件监听父组件传过来的值做个说明watch是一个对象，对象就有键，有值。值可以是函数：就是当你监控的家伙变化时，需要执行的函数，这个函数有两个形参，第一个是变化后的值，第二个是变化前的值。值也可以是函数名：不过这个函数名要用单引号来包裹。值是包括选项的对象：选项包括有三个。第一个handler：其值是一个回调函数。即监听到变化时应该执行的函数。第二个是deep：其值是true或false；确认是否深入监听。deep的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器（受现代JavaScript的限制(以及废弃Object.observe)，Vue不能检测到对象属性的添加或删除）第三个是immediate：其值是true或false；immediate:true代表如果在wacth里声明了之后，就会立即先去执行里面的handler方法，如果为false就跟我们以前的效果一样，不会在绑定的时候就执行创建如下图片显示代码<el-imagestyle="width:100px;height:100px":src="datalevelForm.imgRes.urlsrc":fit="fit"></el-image></div>datalevelForm.imgRes.urlsrc负责接收来自图片组件传过来的图片url值
在介绍Vue生命周期之前有必要先讨论一下钩子函数（hooks）钩子钩子这事情需要相对的理解，直白点说，它也只是一些函数而已。但是把一些指定情况的函数组合成一个链条，就像描述一个动作的开始到结束的过程，亦或者是一个人的出生到死亡的过程。钩子函数的作用就是记录这个过程中的一些重要的细化的动作。只不过是一些特定状态下的函数。Vue的生命周期及钩子只看官方对Vue的生命周期的描述很难把这个事情理解透彻，下面我把官方的生命周期图转换成另外一种描述的图下面是转换后的生命周期图<!DOCTYPEhtml><html><head><title>钩子函数</title><metacharset="utf-8"><scriptsrc="http://cdn.bootcss.com/vue/2.1.10/vue.js"></script><body><divid="app"><p>{{message}}</p><inputtype="button"@click="change"value="更新数据"/><inputtype="button"@click="destroy"value="销毁"/></div><scripttype="text/javascript">varvm=newVue({el:'#app',data:{message:"WelcomeVue"},methods:{change(){this.message='Daturaisme';},destroy(){vm.$destroy();}},beforeCreate:function(){console.group('beforeCreate创建前状态===============》');console.log("%c%s","color:red","el:"+this.$el);//undefinedconsole.log("%c%s","color:red","data:"+this.$data);//undefinedconsole.log("%c%s","color:red","message:"+this.message);//undefined},created:function(){console.group('created创建完毕状态===============》');console.log("%c%s","color:red","el:"+this.$el);//undefinedconsole.log("%c%s","color:green","data:"+this.$data);//[objectObject]=>已被初始化console.log("%c%s","color:green","message:"+this.message);//WelcomeVue=>已被初始化},beforeMount:function(){console.group('beforeMount挂载前状态===============》');console.log("%c%s","color:green","el:"+(this.$el));//已被初始化console.log(this.$el);//当前挂在的元素console.log("%c%s","color:green","data:"+this.$data);//已被初始化console.log("%c%s","color:green","message:"+this.message);//已被初始化},mounted:function(){console.group('mounted挂载结束状态===============》');console.log("%c%s","color:green","el:"+this.$el);//已被初始化console.log(this.$el);console.log("%c%s","color:green","data:"+this.$data);//已被初始化console.log("%c%s","color:green","message:"+this.message);//已被初始化},beforeUpdate:function(){alert("更新前状态");console.group('beforeUpdate更新前状态===============》');//这里指的是页面渲染新数据之前console.log("%c%s","color:green","el:"+this.$el);console.log(this.$el);console.log("%c%s","color:green","data:"+this.$data);console.log("%c%s","color:green","message:"+this.message);alert("更新前状态2");},updated:function(){console.group('updated更新完成状态===============》');console.log("%c%s","color:green","el:"+this.$el);console.log(this.$el);console.log("%c%s","color:green","data:"+this.$data);console.log("%c%s","color:green","message:"+this.message);},beforeDestroy:function(){console.group('beforeDestroy销毁前状态===============》');console.log("%c%s","color:red","el:"+this.$el);console.log(this.$el);console.log("%c%s","color:red","data:"+this.$data);console.log("%c%s","color:red","message:"+this.message);},destroyed:function(){console.group('destroyed销毁完成状态===============》');console.log("%c%s","color:red","el:"+this.$el);console.log(this.$el);console.log("%c%s","color:red","data:"+this.$data);console.log("%c%s","color:red","message:"+this.message)}})</script></body></html>created和mounted的区别beforecreated：el和data并未初始化created:完成了data数据的初始化，el没有beforeMount：完成了el和data初始化mounted：完成挂载updated这个钩子函数主要负责处理：当我们单击页面中的“更新数据”按钮，将数据更新。就能看到data里的值被修改后，这时将会触发update的操作。destoryed销毁生命周期，当执行完destoryed以后当前页面就不会再受Vue的任何影响。再实际操作过程中，可能使用的相对比较少，因为貌似很难停止页面的操作小结一下beforecreate:举个栗例子：可以在这加个loading事件created：在这结束loading，还做一些初始化，实现函数自执行mounted：在这发起后端请求，拿回数据，配合路由钩子做一些事情beforeDestory：你确认删除XX吗？destoryed：当前组件已被删除，清空相关内容生命周期需要相对的理解和体会，才能准确判定在什么情况下去使用哪个钩子函数。
实现该项参数的获取要考虑以下几个方面的事情：1.浏览器是否满足ES5及ES6的问题2.要熟悉WEBAPI的一些内置函数及对象，如：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/locationfunctionloadPageVar(sVar){returndecodeURI(window.location.search.replace(newRegExp("^(?:.*[&\\?]"+encodeURI(sVar).replace(/[\.\+\*]/g,"\\$&")+"(?:\\=([^&]*))?)?.*$","i"),"$1"));}console.log('路由URL：'+location)console.log('路由URL参数：'+loadPageVar("logintype"))本次总结如下：
涉及工具软件：HBuilder软件最新版VisualStudioCode手机一部（推荐安卓，亲测锤子手机）商米收银机一台谷歌浏览器VueCli脚手架第一步：将做好的Vue前端进行Build命令发布重点路径问题：因为正常Vue内调试的时候使用的publicPath=‘/’（注意publicPath的默认值就是/）,但是打包成app以后需要变换成相对路径（./）,即publicPath=‘./’，否则会发生所有资源全部找不到错误提示。API接口数据传输问题：正常的Vue跨域在这里的不起作用的，需要手动更改配置文件中API接口前缀，并附带接口跨域网址，如下图所示第二步：将发布后的文件在HBuilder中导入，并将W模式转换成A模式主要是要生成manifest.json文件，并进行APP发布的各项参数配置第三步：先连接真机（安卓的）进行测试确保真机状态下无任何问题（注意：此处一般会产生的问题是路径错误或者API请求连接错误）第四步：发布打包app安卓和IOS都可以，亲测安卓、IOS均没有问题第五步：安装应用体验功能，测试数据完整度。