vue中通过multer上传图片到express服务器、单个文件下载、批量文件下载

男娘i 2021-07-25 15:46 1075阅读 0赞

首先在express中安装multer

cnpm i -S multer

# express项目结构  #

![20200905115404356.png][]

upload.js

// routes/upload.js
    var express = require('express');
    var router = express.Router();
    const multer = require('multer')
    
    const storage = multer.diskStorage({
        //存储的位置
        destination: 'public/images/', // 保存的路径，备注：需要自己创建
        //文件名字的确定 multer默认帮我们取一个没有扩展名的文件名，因此需要我们自己定义
        filename(req, file, cb) {
            // cb(null, Date.now() + file.originalname)
            cb(null, file.originalname)
    
        }
    })
    const upload = multer({
        storage
    })
    router.post('/addPicture', upload.single('file'), (req, res) => {
        //线上的也就是服务器中的图片的绝对地址
        var url = '/images/' + req.file.filename
        console.log('url', url)
        res.send({
            msg: 'success',
            avatarUrl: url
        })
    })
    
    module.exports = router;

app.js。这里要跨越，记得提前安装好cors

//跨域
    var cors = require('cors');
    app.use(cors());
    
    
    var uploadRouter = require('./routes/upload')
    app.use('/upload', uploadRouter);

test.vue

<template>
      <div class="test">
        <el-upload
          class="avatar-uploader"
          action="/api/upload/addPicture"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
    </template>
    
    <script>
    export default {
      components: {},
      data() {
        return {
          imageUrl: ""
        };
      },
      created() {},
      mounted() {},
      computed: {},
      methods: {
        handleAvatarSuccess(res, file) {
          this.imageUrl = URL.createObjectURL(file.raw);
          console.log("res", res);
          console.log("this.imageUrl", this.imageUrl);
          console.log("file", file);
        },
        beforeAvatarUpload(file) {
          const isJPG = file.type === "image/jpeg";
          const isLt2M = file.size / 1024 / 1024 < 2;
    
          if (!isJPG) {
            this.$message.error("上传头像图片只能是 JPG 格式!");
          }
          if (!isLt2M) {
            this.$message.error("上传头像图片大小不能超过 2MB!");
          }
          return isJPG && isLt2M;
        }
      }
    };
    </script>
    
    <style lang="scss" scoped>
    .test {
      height: 100vh;
    
      .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }
      .avatar-uploader .el-upload:hover {
        border-color: #409eff;
      }
      .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
      }
      .avatar {
        width: 178px;
        height: 178px;
        display: block;
      }
    }
    </style>

开发环境跨域：vue.config.js

module.exports = {
        devServer: {
            proxy: {
                '/api': {
                    target: 'http://localhost:5001', //开发环境服务器端口
                    changeOrigin: true, //這裡true表示实现跨域
                    pathRewrite: {
                        '^/api': ''
                    }
                }
            }
        }
    }

# 效果图 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

手动上传到服务器：

<template>
      <div class="test">
        <el-upload
          ref="upload"
          action="/api/upload/addPicture"
          :file-list="fileList"
          :auto-upload="false"
        >
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button
            style="margin-left: 10px"
            size="small"
            type="success"
            @click="submitUpload"
            >上传到服务器</el-button
          >
        </el-upload>
      </div>
    </template>
      
    <script>
    export default {
      components: {},
      data() {
        return {
          fileList: [],
        };
      },
      created() {},
      mounted() {},
      computed: {},
      methods: {
        submitUpload() {
          this.$refs.upload.submit();
        },
      },
    };
    </script>
     
    <style lang="scss" scoped>
    .test {
      height: 100vh;
    }
    </style>

![20201106092920855.png][]

目前是每次只能上传一个文件，如果希望一次性上传多个文件，很简单，只需要在**<el-upload>**组件中添加**multiple**属性即可

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1][]

# 文件下载 #

### 下载单个文件 ###

![20201208152248465.png][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2][]

![20201208152202148.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3][]

downloadFile(url) {
          const iframe = document.createElement("iframe");
          iframe.style.display = "none"; // 防止影响页面
          iframe.style.height = 0; // 防止影响页面
          iframe.src = url;
          document.body.appendChild(iframe); // 这一行必须，iframe挂在到dom树上才会发请求
          setTimeout(() => {
            iframe.remove();
          }, 5 * 60 * 1000);
        },

注意：这种方式可以下载**word,ppt,excel、tif**等数据，但不能下载txt、png、mp4格式的文件

### 效果图： ###

![20201208152550939.gif][]

此外，还有以下方式，如下：

### 1，用<a>标签的href属性 ###

在当前窗口下载，体验不错

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 4][]

### 2、window.location.href ###

在当前窗口下载。体验较好，推荐

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 5][]

### 3、window.open ###

`window.open` 默认是开启一个新的窗口，一闪然后关闭，给用户的体验并不好，可以加上第二个参数 `window.open('/download/1.png', '_self');`，这样就会在当前窗口直接下载了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 6][]

然而这样是将 url 替换当前的页面，则会触发 `beforeunload` 等页面事件，如果你的页面监听了该事件做一些操作的话，那就有影响了。那么还可以使用一个隐藏的 iframe 窗口来达到同样的效果。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 7][]

### 4、在<a>标签中不用href，而是用方法的形式 ###

在当前窗口下载，体验较好

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 8][]

# 文件批量下载 #

### 一、下载 ###

cnpm i -S jszip file-saver

### 二、引入 ###

import axios from "axios";
    import JSZip from "jszip";
    import FileSaver from "file-saver";

### 三、实现代码 ###

![20201208143616447.png][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 9][]

![20201208143424979.png][]

getFile(url) {
          return new Promise((resolve, reject) => {
            axios({
              method: "get",
              url,
              responseType: "arraybuffer", //必须加这个！这种方式可以下载txt、png、mp4、tif、docx、pptx、xlsx、pdf等格式数据
            })
              .then((res) => {
                resolve(res.data);
              })
              .catch((error) => {
                reject(error.toString());
              });
          });
        },
    
    
        handleBatchDownload() {
          const dataPathArr = [
            "/api/images/test_zip/img.png",
            "/api/images/test_zip/test.txt",
            "/api/images/test_zip/NDVI08_2000.02.19_2000.02.25.tif",
            "/api/images/test_zip/video.mp4",
          ]; // 需要下载打包的路径, 可以是本地相对路径, 也可以是跨域的全路径
          const zip = new JSZip();
          const cache = {};
          const promises = [];
          dataPathArr.forEach((item) => {
            const promise = this.getFile(item).then((data) => {
              // 下载文件, 并存成ArrayBuffer对象
              const arr_name = item.split("/");
              const file_name = arr_name[arr_name.length - 1]; // 获取文件名
              zip.file(file_name, data, { binary: true }); // 逐个添加文件
              cache[file_name] = data;
            });
            promises.push(promise);
          });
    
          // Promise.all可以将多个Promise实例包装成一个新的Promise实例。
          // 同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，
          // 而失败的时候则返回最先被reject失败状态的值。
          Promise.all(promises).then(() => {
            zip.generateAsync({ type: "blob" }).then((content) => {
              // 生成二进制流
              FileSaver.saveAs(content, "打包下载.zip"); // 利用file-saver保存文件
            });
          });
        },

注意：这种方式可以下载**txt、png、mp4、tif、docx、pptx、xlsx、pdf**等格式数据

### 效果图： ###

![20201208153105756.gif][]

[20200905115404356.png]: /images/20210725/a55b6cf3bc3a437fa71e68008da45dfe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/db68142dde084963967c85feebecd883.png
[20201106092920855.png]: /images/20210725/087ca4f419fe44eebcb6a328d83ab9cb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: /images/20210725/a8c408db77884bf986b1eecf0bd74eeb.png
[20201208152248465.png]: https://img-blog.csdnimg.cn/20201208152248465.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2]: /images/20210725/b5701eae096a463ba6fd17ed8439468c.png
[20201208152202148.png]: /images/20210725/a2546a7c2bd14f49a3a1a3c0aafba8d8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3]: /images/20210725/baedbb425ece447b861f004b8e98be90.png
[20201208152550939.gif]: /images/20210725/99180fd2009d4c0e96372a286b05c1cf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 4]: /images/20210725/ef9e94033d9248e1815f15257c211941.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 5]: /images/20210725/35190d90a6434d3d8e346bdfee6d1f60.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 6]: /images/20210725/b9032840fe194e63b5f0057c11dc1a98.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 7]: /images/20210725/b390c6266dce4aa598d1504cc27b6eb5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 8]: /images/20210725/839bb1b0ee004b60a47b5815c370dc03.png
[20201208143616447.png]: https://img-blog.csdnimg.cn/20201208143616447.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 9]: /images/20210725/95f62178a5284deeb5f5500c64534d30.png
[20201208143424979.png]: /images/20210725/a061d3eaa9874d3187096d5c4e09601b.png
[20201208153105756.gif]: /images/20210725/d4b652508af64b6399a29ce8eeab3a40.png