1.跨域
配置文件 重要的是devServer节点配置
module.exports = { pages: { index: { //入口 entry: 'src/main.js', }, }, lintOnSave:false, //关闭语法检查 //开启代理服务器（方式一） /* devServer: { proxy: 'http://localhost:5000' }, */ //开启代理服务器（方式二） devServer: { proxy: { '/api': { target: 'http://127.0.0.1:7001', // pathRewrite:{'^/atguigu':''}, // ws: true, //用于支持websocket // changeOrigin: true //用于控制请求头中的host值 }, '/demo': { target: 'http://localhost:5001', pathRewrite:{'^/demo':''}, // ws: true, //用于支持websocket // changeOrigin: true //用于控制请求头中的host值 } } } } 这里有两个坑target: 'http://127.0.0.1:7001', 这个地址是药请求的 如果想跨域的话就自己请求自己的地址 axios.post('http://localhost:8080/api/admin/login', { 'username': '19568269510', 'password': '123456' }) 大坑 如果请求自己的地址的话一定要看一下 自己的路由地址是localhost 还是127.0.0.1
2.设置登陆以后返回的token
window.sessionStorage.setItem('token', res.data.data.token)
3.设置请求的时候的请求头字段
// 配置请求拦截器 增加token axios.interceptors.request.use((config) => { console.log(config); config.headers.Authorization=window.sessionStorage.getItem('token') return config })
4.导航路由跳转判断卡顿逻辑函数
router.beforeEach(function (to, from, next) { // console.log(to); console.log(from); if (window.sessionStorage.getItem('token')) { next() } else { if(to.name=='login'){ next() }else{ next('/login') } } })
导航菜单全部展开
图片跟表单信息一块上传
7.多文件上传获取文件的数组
handleRemove(file, fileList) { this.$message.error("删除成功!"); this.ruleForm2.schoolLicence = [] fileList.map(x => { this.ruleForm2.schoolLicence.push(x.raw) }) },
文件上传和删除 都写成这样 快速直接
！！！上传的是得到的文件的raw
:on-change//上传 :auto-upload="false"//关闭自动上传 :on-remove//删除
8.上传图片同表单
<el-form-item label="上传学校证件" prop="schoolLicence"> <div class="shousuo"> <el-upload action="uploadAction" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :show-file-list="true" name="img" ref="upload" :data="form" accept="image/png,image/gif,image/jpg,image/jpeg" :headers="headers" :on-exceed="handleExceed" :auto-upload="false" :on-error="uploadError" :before-upload="handleBeforeUpload" :on-change="changeFile"> <i class="el-icon-plus"></i> </el-upload> </div> </el-form-item>
data 定义
schoolLicence: [], //学校认证
表单规则给上 不让他为空（这个是自定义的）
handleBeforeUpload(file) { console.log('按钮', this.titleMap) if (!(file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/jpg' || file .type === 'image/jpeg')) { this.$notify.warning({ title: '警告', message: '请上传格式为image/png, image/gif, image/jpg, image/jpeg的图片' }) } let size = file.size / 1024 / 1024 / 2 if (size > 2) { this.$notify.warning({ title: '警告', message: '图片大小必须小于2M' }) } }, handleBeforeUpload(file) { console.log('按钮', this.titleMap) if (!(file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/jpg' || file .type === 'image/jpeg')) { this.$notify.warning({ title: '警告', message: '请上传格式为image/png, image/gif, image/jpg, image/jpeg的图片' }) } let size = file.size / 1024 / 1024 / 2 if (size > 2) { this.$notify.warning({ title: '警告', message: '图片大小必须小于2M' }) } }, //图片上传超过数量限制 handleExceed(files, fileList) { this.$message.error("上传图片不能超过1张!"); }, // 删除上传学校证件的函数 handleRemove(file, fileList) { this.$message.error("删除成功!"); this.ruleForm2.schoolLicence = [] fileList.map(x => { this.ruleForm2.schoolLicence.push(x.raw) }) }, // 删除上传学校环境的函数 handleRemoveschoolPic(file, fileList) { this.$message.error("删除成功!"); this.ruleForm2.schoolPic = [] fileList.map(x => { this.ruleForm2.schoolPic.push(x.raw) }) }, // 图片上传失败时 uploadError() { this.$message.error("图片上传失败!"); }, //预览图片 handlePictureCardPreview(file) { this.dialogImageUrl = file.url; this.dialogVisible = true; }, //文件改变时 on-change方法 ，fileList[0].raw 就是传给后端的值 //filelist这个对象里面有很多属性，我们上传文件时，实际上传的是filelist列表中每一项的raw,只有raw可以正常上传， 获取到文件后，需要定义变量保存文件。所以需要获取filelist中的raw进行保存。 //这里我用的formdata上传多文件，console打印formdata，文件在控制台中显示的格式为binary。 changeFile(file, fileList) { this.ruleForm2.schoolLicence = [] fileList.map(x => { this.ruleForm2.schoolLicence.push(x.raw) }) },
上传
uploadFileFun(formName) { console.log(this.uploadFiles); this.$refs[formName].validate((valid) => { if (valid) { let fd = new FormData(); fd.append('rname', this.ruleForm2.rname); fd.append('rphone', this.ruleForm2.rphone); fd.append('password', this.ruleForm2.password); fd.append('bname', this.ruleForm2.bname); fd.append('place', this.ruleForm2.place); fd.append('around', this.ruleForm2.around); fd.append('resource', this.ruleForm2.resource); fd.append('representor', this.ruleForm2.representor); fd.append('loginLicence', this.ruleForm2.uploadFiles[0]); fd.append('licence', this.ruleForm2.uploadFiles[1]); fd.append('function', this.ruleForm2.function); let config = { headers: { 'Content-Type': 'multipart/form-data' } } // 根据goodsID判断是编辑提交还是新增提交，主要针对新增编辑使用同一个弹框 this.$http.post("/api/admin/bussiness/add", fd, config).then(res => { console.log(res); if (res.data.data.msg === "添加成功") { this.dialogFormVisible = false this.$message({ message: '添加企业会员成功', type: 'success' }); //新增完清空表单内容 setTimeout(() => { this.resetForm('ruleForm2') }, 200) this.reload() } else { this.$message.error('数据添加失败请联系管理员'); } }).catch(res => { console.log(res) }) } }) },
9.表单上传
10.JS 文件流和base64互转
// base64转文件流 base64toFile (dataurl, filename = 'file') { let arr = dataurl.split(',') let mime = arr[0].match(/:(.*?);/)[1] let suffix = mime.split('/')[1] let bstr = atob(arr[1]) let n = bstr.length let u8arr = new Uint8Array(n) while (n--) { u8arr[n] = bstr.charCodeAt(n) } return new File([u8arr], `${filename}.${suffix}`, { type: mime }) }, // 文件流转base64 filetoBase64 (file) { let reader = new FileReader(); //实例化文件读取对象 reader.readAsDataURL(file); //将文件读取为 DataURL,也就是base64编码 reader.onload = (e)=> { //文件读取成功完成时触发 let dataURL = e.target.result; //获得文件读取成功后的DataURL,也就是base64编码 // console.log(dataURL); } },
