山东大学软件学院创新实训——项目记录（四）

零、前言

本周解决了一些项目的问题，以及对问答页面的细节进行调整修改，用了div的一个位置特性来辅助。

一、vue项目启动问题

解决npm ERR! code ENOENT npm ERR! syscall open npm ERR! path X:\RuoYi-Vue-master\RuoYi-Vue-master/pack

问题报错：

npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path F:\课程作业和一些报告证件\大三\大三下\创新实训\innovation-training-master\package.json
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, open 'F:\课程作业和一些报告证件\大三\大三下\创新实训\innovation-training-master\package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

解决办法： 找到 package.json正确的目录，然后再在终端执行npm命令即可。

产生该问题的原因是我前端项目的启动路径出现差错，进入正确目录执行启动命令才能找到package.json。
如下是我的电脑正确路径为例：

二、div的绝对位置处理

问题描述：在对话界面，要设置输入框始终在底部正中且不被对话记录的div挤出父div。
解决方案：使用相对定位和负 margin 来实现。

HTML 结构：

<div class="container">
  <div class="content">
    <!-- 这里是其他内容 -->
    <div class="bottom-center">
      <!-- 这个 div 将被固定在底部中间 -->
    </div>
  </div>
</div>

CSS 样式：

.container {
  position: relative;
  width: 300px; /* 为容器指定宽度 */
  height: 300px; /* 为容器指定高度 */
  border: 1px solid #000; /* 用于演示，可以移除 */
}

.content {
  height: 100%; /* 让内容 div 占满容器的高度 */
}

.bottom-center {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  /* 如果需要水平居中可以使用以上样式，如果需要水平和垂直都居中则需要下面两行 */
  /* bottom: 50%;
  transform: translate(-50%, 50%); */
}

这样，

将固定在父容器 .container 内部的底部中间位置。可以根据需要调整容器和内容的大小。

处理结果;

三、图片上传组件

使用element-ui的上传组件，同时增加自定义的图片信息解析函数。

<el-upload
  action="https://jsonplaceholder.typicode.com/posts/"
  list-type="picture-card"
  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove">
  <i class="el-icon-plus"></i>
</el-upload>

//通过自定义函数监听点击事件，打开文件上传页，并且获取图片的base64编码
toGetImg() {
      if (inputElement === null) {
        // 生成文件上传的控件
        inputElement = document.createElement("input");
        inputElement.setAttribute("type", "file");
        inputElement.style.display = "none";
        if (window.addEventListener) {
          inputElement.addEventListener("change", this.uploadFile, false);
        } else {
          inputElement.attachEvent("onchange", this.uploadFile);
        }
        document.body.appendChild(inputElement);
      }
      inputElement.click();
    },
ploadFile(el) {
      if (el && el.target && el.target.files && el.target.files.length > 0) {
        const files = el.target.files[0];
        const isLt2M = files.size / 1024 / 1024 < 2;
        const size = files.size / 1024 / 1024;
        // 判断上传文件的大小
        if (!isLt2M) {
          this.$message.error("上传头像图片大小不能超过 2MB!");
        } else if (files.type.indexOf("image") === -1) {
          //如果不是图片格式
          // this.$dialog.toast({ mes: '请选择图片文件' });
          this.$message.error("请选择图片文件");
        } else {
          const that = this;
          const reader = new FileReader(); // 创建读取文件对象
          reader.readAsDataURL(el.target.files[0]); // 发起异步请求，读取文件
          reader.onload = function () {
            // 文件读取完成后
            // 读取完成后，将结果赋值给img的src
            that.uploadImg = this.result;
            console.log(that.uploadImg);
            // 数据传到后台
            // const formData = new FormData()
            // formData.append('file', files); // 可以传到后台的数据
          };
        }
      }
    },