1.关于数据for循环不要用index作为key，2.面二次刷新404问题（空白） 的探讨 3. vue图片上传
问题一：for循环建议不要直接用index作为key
效果：页面删除之后不刷新，页面有两个图元，将前面画的图元删除掉，下拉找到的还是原来的那个图元，下拉数据没有“刷新”，
我们首先来讨论一下页面vue数据绑定的机制
原因：图元删除的时候,页面是有两个图元，一个先画一个后画，如果我删除后画的那个，正常，但是如果我删除的是第一个图元，如果页面正常走，看不出效果，但是如果页面在断点的情况下看，就能看出了问题
页面流程实际是先将后画的图元删掉了，然后将后一个图元的数据放到了前面一个数据中将dom渲染，
a图元对应index为1的数据 b图元对应index为2的数据
刚刚页面的问题，是因为for循环的时候用了index作为索引，删除数据1的时候，来到页面的时候并没有删除掉对应dom也就是index为1 而是把index为2的这个图元 删除掉了，把数据1放进了dom1的这个图元里面 渲染了
而在代码实现中，把业务代码写进了destroy里面，destroy他是判断页面dom销毁的时候触发 因为销毁的dom 因为index的问题，删除1的数据销毁了图元2，,取到的数据也是不对的了
解决办法：
1、不直接用index作为索引
2、如果用了，操作数据时候不要在destroy里面进行
问题二：页面刷新空白
报表页面从菜单进，可以正常打开报表页面，但是当页面一刷新了，页面就报错了
whitelabel Error Page
当时一直没有找到解决办法 后台觉得不是他的问题，前端也说不是前端问题，因为毕竟第一次能出来，
原因：
因为页面url地址的原因，url路由链接写成了report 而前端代码在vue.config.js里面用了配置服务器 proxy 如果有report字段的就进行地址重写，因为碰到了这个report 进行了重定向跳到了一个位置的地址里面去了，所以就报错了
问题三：图片上传
1、头部信息一直带不上 上传不了，主要是因为请求头部被污染
解决办法，新建了axios，单独用做上传用
/** * 封装上传图片upload的方法 * @param url * @param data * @returns {Promise} */ export function upload(url, data = {}) { let instance = axios.create(); let Authorization = cookies.get('access_token') ? "Bearer " + cookies.get('access_token') : '' instance.defaults.headers.common['Authorization'] = Authorization return new Promise((resolve, reject) => { instance.post(url, data) .then(response => { if (response.data) resolve(response.data); }, err => { reject(err) }) }) }
页面代码：
<template> <div class="param-pannel"> <common-prm/> <border-prm myStyle="style" /> <collapse-item title="图片" :isShow='true'> <div class="param-gap"> <label class="left" for="">路径 :</label> <div class="right"> <input type="file" name="file" ref="input" enctype="multipart/form-data" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" multiple="multiple" @change="getFile" class="data-value" /> </div> </div> </collapse-item> </div> </template> <script> import mixins from '../paramMixins.js' import Api from '@frameworks/conf/api' export default { name: 'ImgParam', mixins: [mixins], methods: { getFile(e) { //验证 if (e.target.files[0].size >= 10048576) { this.$_c.msg("上传图片大小不得超过10M", { type: 'error' }) return false; } // 预览图片用 // var reader = new FileReader(); // let _this = this // reader.onload = (function(file) { // return function(e) { // var datainfo = this.result // console.log(datainfo) // _this.params.images = datainfo // _this.updateData() // } // })(e.target.files[0]); // reader.readAsDataURL(e.target.fes[0]); //上传 this.upload(e.target.files[0]) }, //调用上传图片的接口上传 upload(file) { var formData = new FormData() formData.append('file', file) /*axios请求方式 */ this.$ajax.upload(Api.uploadFile, formData).then((res) => { if (res.code === 200) { this.$_c.msg(res.message) //console.log(res.data.url)//将成功返回的url值设置回去 //console.log(this.params) this.params.images = res.data.url //如果想模拟就把下面两行去掉 this.updateData() } else { this.$_c.msg(res.message, { type: 'error' }) } }).catch(error => { this.$_c.msg("服务器报错", { type: 'error' }) }) //axios封装的post请求（不成功） /*this.$ajax.post(Api.uploadFile, formData).then(function(res) { alert(123) }, function() { this.promptText = '请求失败' this.$refs.prompt.show() })*/ /*原生请求方式（成功） */ // let xhr = new XMLHttpRequest(); // XMLHttpRequest 对象 // xhr.open("post", "http://localhost:8082/api/files/api/upload/uploadFile", true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。 // //xhr.setRequestHeader('content-type', 'multipart/form-data') // //xhr.setRequestHeader('Accept', 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8') // xhr.send(formData); //开始上传，发送form数据 // xhr.onreadystatechange = function () { // var data = xhr.responseText; // console.log(data); // } } } } </script> <style scoped lang="scss"> .param-pannel input, .param-pannel select { border: 1px solid #ddd; width: 100% } .param-pannel>div { padding: 5px 0; } </style>
效果图 （支持各种图片上传 gif的如果不行就是后台问题，请求头问题）
