DDR爱好者之家 Design By 杰米

项目需求是多个文件上传,在一次请求中完成,而ElementUI的上传组件是每个文件发一次上传请求,因此我们借助FormData的格式向后台传文件组

html代码

<div class="upload-file">
 <el-upload
   accept=".xlsx"
   ref="upload"
   multiple
   :limit="5"
   action="http://xxx.xxx.xxx/personality/uploadExcel"
   :on-preview="handlePreview"
   :on-change="handleChange"
   :on-remove="handleRemove"
   :on-exceed="handleExceed"
   :file-list="fileList"
   :http-request="uploadFile"
   :auto-upload="false">
   <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
   <el-button style="margin-left: 133px;" size="small" type="success" @click="submitUpload">上传到服务器
   </el-button>
   <div slot="tip" class="el-upload__tip">只能上传xlsx文件,且不超过100m</div>
 </el-upload>
 </div>

修改:auto-upload="false"属性为false,阻止组件的自动上传
:http-request="uploadFile"覆盖上传事件
@click=“submitUpload”,给上传按钮绑定事件

element-ui中el-upload多文件一次性上传的实现

data() {
	return {
		fileData: '', // 文件上传数据(多文件合一)
		fileList: [],  // upload多文件数组
		uploadData: {
     fieldData: {
      id: '', // 机构id,
     }
    },
	}
}


methods:{
		// 上传文件
		uploadFile(file) {
		  this.fileData.append('files', file.file); // append增加数据
		},
		
		// 上传到服务器
	   submitUpload() {
	      let fieldData = this.uploadData.fieldData; // 缓存,注意,fieldData不要与fileData看混
	      if (fieldData.id === '') {
	        this.$message({
	          message: '请选择上传机构',
	          type: 'warning'
	        })
	      } else if (this.fileList.length === 0) {
	        this.$message({
	          message: '请先选择文件',
	          type: 'warning'
	        })
	      } else {
	        const isLt100M = this.fileList.every(file => file.size / 1024 / 1024 < 100);
	        if (!isLt100M) {
	          this.$message.error('请检查,上传文件大小不能超过100MB!');
	        } else {
	          this.fileData = new FormData(); // new formData对象
	          this.$refs.upload.submit(); // 提交调用uploadFile函数
	          this.fileData.append('pathId', fieldData.id); // 添加机构id
	          this.fileData.append('loginToken', this.loginToken); // 添加token
	          post(this.baseUrlData.url_02 + ":8090/personality/uploadExcel", this.fileData).then((response) => {
	            if (response.data.code === 0) {
	              this.$message({
	                message: "上传成功",
	                type: 'success'
	              });
	              this.fileList = [];
	            } else {
	              this.$message({
	                message: response.data.desc,
	                type: 'error'
	              })
	            }
	          });
	        }
	      }
	    },
	    
      //移除
      handleRemove(file, fileList) {
        this.fileList = fileList;
        // return this.$confirm(`确定移除 ${ file.name }?`);
      },

      // 选取文件超过数量提示
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 5 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);
      },	   

			 //监控上传文件列表
      handleChange(file, fileList) {
        let existFile = fileList.slice(0, fileList.length - 1).find(f => f.name === file.name);
        if (existFile) {
          this.$message.error('当前文件已经存在!');
          fileList.pop();
        }
        this.fileList = fileList;
      },
}

此时就达到上传4个文件只发送了一个xhr请求了

element-ui中el-upload多文件一次性上传的实现

DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?