【日常bug记录】

 项目场景：

项目是基于会展方面的大屏展示，以及数据的交互之类的

---

问题描述

提示：这里描述项目中遇到的问题：

1.项目启动的时候爆出的问题：一直出错项目起不来（启动其他项目没问题）

2.项目启动完毕后，样式出现问题也就是已经发版线上的项目展示没问题，本地跑起来迭代死翘翘

涉及适配问题

3.附件上传问题的总结，包括app开发和这个web的

---

原因分析以及解决方案：

提示：这里填写问题的分析：

1.报错的第一反应当然是复制去百度，当然还是得总结下，防止忘记，归根结底就是node版本与npm版本不对应，也因为这个原因自己去学习了下利用nvm来对自己node的版本进行管理，主要下载这个nvm匹配环境具体可以参考其他大神文章，现在切换node版本只需要

nvm ls                      // 看安装的所有node.js的版本
nvm list available      // 查显示可以安装的所有node.js的版本

nvm install 版本号      // 例如：nvm install 14.19.0

nvm use 版本号           // 切换到使用指定的nodejs版本

node -v                      // 检测是否切换完成，新开一个cmd
 

其他的可以参考别人的博客，很详细Node多版本的切换工具nvm安装教程_多放香菜少加葱的博客-CSDN博客_node 版本切换工具

2.项目上线显示正常但是拉到本地死翘翘的样式问题，主要在于大屏的适配上面，当时只道做了适配，是利用lib-flexible和 px2rem-loader进行的适配，当时觉得线上没问题，就本地不需要倒腾什么，但是就是怎么都显示不正常

无赖只能去把这种方式的适配原理去了解下，迭代这个事情还是得把别人的代码搞明白，深刻的就发现其中的玄机，原因在于在屏幕尺寸超出一定分辨率后便不再适配。

所以在我们进行了其他操作后需要对源码进行一定的修正

打开./node_modules/lib-flexible/flexible.js，我们看到如下的源码：

function refreshRem(){
    var width = docEl.getBoundingClientRect().width;
    if (width / dpr > 540) {
        width = 540 * dpr;
    }
    var rem = width / 10;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
}

也就是说，当屏幕宽度除以dpr（dpr是一个倍数，此处一般为1）大于540这个特定值的时候，那么就不再进行适配了。

所以我们的样式乱的一批那么这个时候我们只要修改

function refreshRem(){
    var width = docEl.getBoundingClientRect().width;
    if (width / dpr < 1980) {
        width = 1980 * dpr;
    } else if (width / dpr > 5760) {
        width = 5760 * dpr;
    }
    var rem = width / 10;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
}

按照你自己的设计稿的尺寸要求灵活变动，重启项目就没啥大事了

3.讲到附件上传这个问题，有点服了我自己（就是无语），当时利用uniapp开发app的时候，上传附件需要formData的形式，因为接口通用web端。但是选择uni.chooseImage, 拍完之后上传接口要求formData格式,但是uniapp不能 new File, 所以无法转换。可以使用plus.uploader.createUpload 来上传formData格式。文章参考uniapp拍照之后上传formData格式到后台 - 简书

具体代码看别人的，对照自己的进行修改，本人试过没啥问题，但是只能真机运行试验

最无语的是web端的，明明饿了么封装的那么好，文档那么清晰，偏偏我就是离谱的每次在这打转，记录下傻不拉几的日常

需求是实现一个只上传txt的附件，长这个样子

 拆解也就是三步走：1.样式2.限制类型3.后端接口上传

          <el-form-item label="附件" style="width: 500px">
                  <el-upload
                    class="upload-demo"
                    ref="upload"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :show-file-list="false"
                    :http-request="uploadFile"
                    :before-upload="beforeFujianUpload"
                  >
                    <el-button
                      type="primary"
                      style="width: 171px; height: 38px"
                    >
                      <img
                        src="@/assets/image/shangchuan@2x.png"
                        width="28px"
                        height="20px"
                        alt=""
                      />
                      <span
                        style="
                          font-size: 16px;
                          display: inline-block;
                          vertical-align: top;
                        "
                        >附件</span
                      ></el-button
                    >
                    <span
                      slot="tip"
                      class="el-upload__tip"
                      style="color: #d0021b"
                    >
                      (注：限定格式：.txt ）
                    </span>
                  </el-upload>
                </el-form-item>

  beforeFujianUpload(file) {
      if (file.type != "" || file.type != null || file.type != undefined) {
        //截取文件的后缀，判断文件类型
        const FileExt = file.name.replace(/.+\./, "").toLowerCase();
        //计算文件的大小
        const isLt5M = file.size / 1024 / 1024 / 1024 < 100; //这里做文件大小限制
        //如果
        if (!isLt5M) {
          this.$showMessage("上传文件大小不能超过 100kb!");
          return false;
        }
        //如果文件类型不在允许上传的范围内
        if (FileExt === "txt") {
          return true;
        } else {
          this.$message.error("上传文件格式不正确!");
          return false;
        }
      }
    },

    uploadFile(file) {
      console.log(file);
      // 把文件放入 FormData 进行提交
      const param = new FormData();
      param.append("fileUpload", file.file);
      console.log(param);
      uploadFile(param).then((response) => {
        // TODO 一些关闭弹框，上传成功提示等
      });
    },

每次看着参数贼多啊，都不知道用还是不用，反正就两大步后面，其他的啥移除或者删除啥的就再加~到此为止

---