Vue学习笔记

问题描述:由于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关键词