el-upload的多文件上传

news/2024/7/10 1:56:27 标签: vue, 前端

el-upload实现多文件上传的方法

<el-upload
          class="upload-demo"
          drag
          action="#"
          multiple
          ref="upload"
          :file-list="files"
          :http-request="handleUpload"
          :on-exceed='handExceed'
          :on-remove="handleRemove"
          :on-success='handFileSuccess'
          :before-remove="beforeRemove"
          :auto-upload="false"
          :limit="5">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">一次只能上传5个文件</div>
        </el-upload>
<span slot="footer" class="dialog-footer">
          <el-button @click="CancelUpload">取 消</el-button>
          <el-button type="primary" @click="fileChange">立即上传</el-button>
        </span>
data () {
    return {
      files:[]
    };
  },
handleUpload(raw){
      this.files.push(raw.file);
      // console.log(files);
    },
    async fileChange() {
      if (this.files.length > 5) {
        this.$message.warning(`当前限制只能上传选择 1~5 个文件`);
        return
      } else {}
      const loading = this.$loading({
        lock: true,
        text: '上传中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.$refs.upload.submit() // 这里是执行文件上传的函数,其实也就是获取我们要上传的文件
      let random = Math.random();
      let formData = new FormData();
      // formData.append("file", param.file);
      formData.append("user_id", localStorage.user_id);
      formData.append("s_id", localStorage.s_id);
      formData.append("random", random);
      formData.append("file_kind", "src");
      this.files.forEach(function (file) {
         formData.append('file', file); // 因为要上传多个文件,所以需要遍历一下才行
         //不要直接使用我们的文件数组进行上传,你会发现传给后台的是两个Object
       })
      let res = await this.$axios.post(`${this.$baseUrl}/file/upload`, formData);
      console.log(res);
      // JSON.parse(res)
      if (res.data.ret) {
        this.$refs.upload.clearFiles();
        this.files = []
        let objList = []
        loading.close();
        
      } else {
        loading.close();
        this.$message.error("上传文件失败" + res.data.msg);
      }
    },
    handExceed(files, fileList){
      this.$message.warning(`当前限制选择 5 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);
    },
    CancelUpload(){
      this.files = []
      this.$refs.upload.clearFiles();
    },
    handFileSuccess(file) {
      console.log(file);
      this.files = []
      this.$refs.upload.clearFiles();
    },
    handleRemove(file, fileList) {
      // console.log(file, fileList);
      this.files = fileList
    },
    beforeRemove(file, fileList) {
      // console.log(file, fileList);
    },

http://www.niftyadmin.cn/n/861518.html

相关文章

vue使用pdf.js在线预览pdf文件

vue使用pdf.js在线预览pdf文件 1、先去下载pdf.js&#xff0c;打开官网 pdf.js官网 &#xff1a;http://mozilla.github.io/pdf.js/getting_started/#download &#xff08;如果打不开这个网站&#xff0c;可以参考这个博客) 百度网盘 链接: https://pan.baidu.com/s/1CK7nHJO…

vue预览word,excel,pptx,pdf文件

vue预览word&#xff0c;excel&#xff0c;pptx&#xff0c;pdf文件 1、做word&#xff0c;excel&#xff0c;pptx的预览&#xff0c;要先确定文件路径访问是通过域名的url来预览&#xff0c;不可以通过IP的url来访问 先把文件路径的url进行url编码&#xff08;encodeURIComp…

el-card的点击事件失效的解决方式

click link改为click.native link//变成原生绑定

哔哩哔哩2020校园招聘前端笔试卷(一)

在数组里面找数的>双指针 1.以下不是CSS伪类选择器的是&#xff1f; 2. [‘1’, ‘2’, ‘3’].map(parseInt) ( ) [1, 2, 3].map((item, index) > {return parseInt(item, index) }) // 第二个参数表示使用什么进制来转换 parseInt(1, 0) // 1 默认十进制的1 parseIn…

微信小程序的两层wx-for的使用

微信小程序的两层wx-for的使用 微信小程序需要用到两次循环来获取页面数据&#xff0c;第二次循环的时候使用wx:for-item"pro"来命名别名 <view><van-grid square border"{{ false }}" column-num"3" wx:for"{{ list }}" w…

计网笔记(二)

3.1分组交换 当主机H1要向另一主机H2发送数据&#xff08;报文&#xff09;时&#xff0c;首先将数据划分成若干个等长的分组&#xff0c;然后将这些分组一个接一个地发往里与H1相联的路由A ,当A接到分组后&#xff0c;先放入缓冲区&#xff0c;再按一定的路由算法确定该分组下…

elementUI的自定义主题

elementUI的自定义主题的设置 一、安装elementUI以及sass-loader,node-sass(项目中使用scss编写需要依赖的插件) npm i element-ui -S npm i sass-loader -D npm i sass-loader -D有时候安装sass的时候会安装失败&#xff0c;可以直接安装固定的版本号。直接复制到到package.…

计网笔记(三)

1传输层知识 传输层是只有计算机才有的层次&#xff0c;主要提供是进程间逻辑通信 可靠传输或者不可靠的功能。 这里简单说一下可靠传输协议TCP 不可靠传输协议UDP。 TCP面向连接&#xff0c;可靠&#xff0c;不提供广播和多播&#xff0c;而且时间延迟比较大&#xff0c;…