Express+vue+element-ui 上传不限制、且多文件上传

最新推荐文章于 2024-08-14 01:24:28 发布

原创最新推荐文章于 2024-08-14 01:24:28 发布 · 536 阅读

0 ·

CC 4.0 BY-SA版权

经验专栏收录该内容

18 篇文章

订阅专栏

本文详细介绍如何在Vue中实现多文件上传功能，包括设置多选、限制上传数量、修改默认上传方法等关键步骤，并提供完整代码示例。

图片上传可参考： https://blog.youkuaiyun.com/YangShuaiPlus/article/details/103875616
多文件上传时需注意：
需设置： multiple 是否支持多选文件 boolean
limit 最大允许上传个数 number
此时还要注意多文件上传一定要修改 :http-request="uploadFile"覆盖组件的默认上传方法。具体细节及代码如下：
在这里插入图片描述
upload 方法和图片上传时一样：如下

  upload(file) {
        console.log(file);
        let fd = new FormData();
        fd.append('files', file.file)
        var self = this;
        this.axios.post("/localhost/uploads",fd)
          .then(function (response) {
            self.$message.success('上传成功');
          })
          .catch(function (error) {
            self.$message.error('上传失败');
          })
      }

github：
vue:
https://github.com/Usered/demo/blob/master/Vue/FirstVue/src/main/daohang2.vue
Express
https://github.com/Usered/demo/blob/master/Express/mydemo/routes/index.js