vue+express实现文件的上传和下载

最新推荐文章于 2024-03-26 11:33:03 发布

不管，我要跨世纪

最新推荐文章于 2024-03-26 11:33:03 发布

阅读量1.3k

点赞数

分类专栏： Vue 面试题文章标签： vue

本文链接：https://blog.csdn.net/gengtieguang/article/details/108984635

版权

本文介绍如何结合vue和express实现文件的上传和下载。首先通过npm安装axios，然后在vue项目中利用input和form表单提交实现前端上传。在后端，使用express和multer快速搭建文件处理服务。最后，配置vue的反向代理，并解析req.files[0]获取上传文件信息。

摘要由CSDN通过智能技术生成

源码地址

一、创建vue项目

npm i axios -S

<template>
  <div class="hello">
    <!-- 标题 -->
    <h1>AirPort</h1>
    <!-- 选择文件 -->
    <div id="show" v-show="isShow">
      <div class="show-top">您选择了如下文件<span @click="isShow=!isShow" class="cancel">×</span></div>
      <p v-for="(li,i) in list" :key="i">{
  {li[0]}}</p>
      <button id="upload" @click="rander">upload</button>
    </div>
    <!-- 取件码 -->
    <div id="code" v-show="isCode">
      <div class="show-top">
        您的取件码为
        <span @click="isCode=!isCode;randerArr.length=0;isShow=false" class="cancel">×</span>
      </div>
      <span v-for="(li,i) in randerArr" :key="i" class="span">{
  {li}}</span>
    </div>
    <!-- 取件 -->
     <div id="get" v-show="isGet">
      <div class="show-top">请输入取件码<span @click="isGet=false;isCode=false" class="cancel">×</span></div>
      <input type="text" v-model="val" class="num">
      <button id="Get" @click="Get">Get</button>
    </div>
    <!-- 按钮 -->
    <div class="div" >
       <input type="file" @change="upload($event)