Что касается загрузки файла koa

2. Используйте koa-body для загрузки файлов

• Наконец, измените метод загрузки файла и загрузите его на локальный сервер в виде потока.
• установить коа-тело

• npm install koa-body --save

• Ссылка на промежуточное ПО koa-body в проекте koa
  

• const koaBody = require('koa-body');
  app.use(koaBody({
      multipart: true,
      formidable: {
          maxFileSize: 200*1024*1024    // 设置上传文件大小最大限制，默认2M
      }
  }));

• После использования промежуточного ПО koa-body загруженные файлы можно получить через ctx.request.files.

  напоминать:
  Новая версия koa-body получает загруженные файлы через ctx.request.files.
  Старые версии koa-body загружают файлы через ctx.request.body.files.
  

• После получения файла сохраните файл в указанную директорию сервера через fs

• // 支持多文件上传到本地
  const uploadFile = (fileArr) => {
  
      var resultArr = []
      fileArr.forEach(element => {
    
        // 防止文件命名一致，文件名后面加上时间的时分
        // const randomNum =  Math.floor((Math.random() * 9 + 1)*1000);
        const randomNum = new Date().getHours()+""+new Date().getMinutes();
    
        // 创建可读流
        const reader = fs.createReadStream(element[1].path);
        let filePath = path.join(__dirname, '../public/node/upload/image/user/') + `${randomNum}_${element[1].name}`;
        // let filePath = path.join(__dirname, '../public/upload/image/user/') + `/${element[1].name}`; 斜杆问题注意一下
        // 创建可写流
        const upStream = fs.createWriteStream(filePath);
        // 可读流通过管道写入可写流
        reader.pipe(upStream);
    
        resultArr.push({
          fileName: element[1].name,
          filePath:  filePath.replace(new RegExp(/(\\)/,"g"),'\\/'),  // 上传到服务器上的真实路径
          fileUrl: `/node/upload/image/user/${randomNum}_${element[1].name}`,  //给前端显示头像
          randomNum: randomNum
        })
      });
    
      return resultArr;
    }

3. Интерфейсный файл загрузки (собственный)

• Метод записи может быть изменен соответствующим образом, здесь написано ts
• html

• <form  id="sendAppealForm">
  	<a href="javascript:void(0);" class="upload">选择文件 > <span class="unfile">未选择任何文件</span>
  		 <input class="replyFileid"  name="appealFile" id="appealFile" type="file"  multiple="multiple"  />
  	</a>
  </form>
  
  <el-button
  	type="danger"
  	style="width:100%; margin-bottom:30px;"
  	@click.native.prevent="handleRegiste"
    >{{ $t('registe.registeIn') }}</el-button>
  </el-form>

•  private handleRegiste() {
  	var aaa: any = document.getElementById('sendAppealForm')
  	var formData = new FormData(aaa);
  
  	var myDate = new Date();  
  	formData.append("uploadTime", myDate.toLocaleDateString());       // 上传日期
  
  
  	var _this = this;
  
  	this.uploadFile(formData).then(res => {
  		console.log(res);
  	});
  }
  
  private uploadFile = (param: any) => {
       
      return new Promise((resolve, reject) => {
        axios
          .post("http://localhost:3000/users/register", param, {
            headers: { "Content-Type": "multipart/form-data" }
          })
          .then(res => {
            resolve(res.data);
          })
          .catch(err => {
            reject(err.data);
          });
      });
    };

4. Файл загрузки внешнего интерфейса (загрузка компонента Ele.me)

• Загружать файлы вручную, при этом может быть загружен только один файл, а загрузка может быть перезаписана.
• Сначала закодируйте, затем проанализируйте:

• <el-upload
    class="avatar-uploader"
    action="/certificateAuthentication/upload"
    :http-request="imgUpload"
    accept=".png, .jpg, .gif, .jpeg"
    :show-file-list="false"
    ref="upload"
    :auto-upload="false"
    :on-change="handleChange"  :before-upload="beforeAvatarUpload"
  >
  	<img v-if="imageUrl" :src="imageUrl" class="avatar" />
  	<i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
  
  <el-button
  	type="danger"
  	@click.native.prevent="handleRegiste"
    >注册</el-button>
  </el-form>
  

• fileList = [];
  
  handleChange(file, fileList) {
  	 if (fileList.length > 0) {
  		 this.fileList = [fileList[fileList.length - 1]]  // 这一步，是 展示最后一次选择的csv文件
  	 }
   }
  
  private handleRegiste() {
    (this.$refs.upload as any).submit();}
  
  private async imgUpload(e: any) {
      const param = new FormData();
      param.append("info", JSON.stringify(this.loginForm));
      param.append("file", this.fileList);   // e.file
      const data: any = await register(param);
      // console.log(data);
  
      if (data.result.length !== 0) {
        this.$router.push({
          path: "/login",
          query: {}
        });
  
        this.$message({
          message: "注册成功",
          type: "success"
        });
      }
    }
  
  
  

• Поскольку это функция регистрации, я не хочу нажимать кнопку загрузки, чтобы загрузить ее на сервер. Мне нужно нажать кнопку регистрации, чтобы загрузить информацию и изображения вместе, поэтому мне нужноРучная загрузка
• Компонент загрузки Ele.me может установить ручную загрузку (автоматическая загрузка отключена)

• :auto-upload="false"

• Затем в вызове метода кнопки регистрации

• this.$refs.upload.submit(); 

• Он найдет атрибут компонента: http-request="imgUpload", а затем вызовет метод imgUpload
• Ручная загрузка была решена, давайте поговорим об этом позжеМожно загрузить только один файл
• file-listсвойство, которое содержит массив файлов, выбранных пользователем. 
  

• 
  

• Я хочу изменить выбранный список файлов в списке файлов с помощью метода изменения и сохранить только последний элемент.
  

• Целевая сцена в основном достигается, но есть проблема со стилем, потому что считается изменением списка файлов и взятием последнего элемента, поэтому после того, как пользователь выбирает второй файл, происходит динамическое изменение с первого файла на второй файл.Эффект переключения не тот,что я хочу.Я хочу,чтобы пользователь нажимал "Загрузить файл",выбирал файл на локальном компьютере,нажимал "ОК",и выбранный файл отображался прямо на странице без динамического переключения. 
  

• css удалите эту часть анимации

• <style lang="scss" scoped>
      .upload-demo {
        display: flex;
      }
      /deep/ .el-list-enter-active,
      /deep/ .el-list-leave-active {
        transition: none;
      }
   
      /deep/ .el-list-enter,
      /deep/ .el-list-leave-active {
        opacity: 0;
      }
      /deep/ .el-upload-list {
        height: 40px;
      }
  </style>

• Что касается того, для чего предназначен /deep/ в css, то на самом деле он предназначен для изменения внутренних стилей сторонних компонентов, таких как elementui, и для проникновения. Если вы не используете scss, вы можете использовать символ >>> для изменения внутренних стилей сторонних компонентов.
  
• Идеальное решение

Окончательное резюме

Проходя мимо друзей-обезьян, если вы знаете, как коа использует грозный и почему я не могу получить доступ к методу form.parse, пожалуйста, дайте мне знать в области комментариев, если это удобно, спасибо!