首页 > 行业 > 正文

vue使用 elementUI中el-upload的遇到的问题总结


(资料图)

使用场景,使用el-upload上传文件,选择文件后不立即上传到服务器上,点击提交按钮时与其他form表单数据一起提交,类似的需求,相信有很多小伙伴遇到,可能也会遇到跟我一起的问题,在这里记录一下
  点击上传  
只能上传jpg/png文件,且不超过500kb

问题1:el-upload文件上传组件,设置auto-upload为false,on-change事件只触发一次

由于原生的input type="file"不管文件上传成功与否,已添加的文件已经被记录了,所以上传文件时,不会触发change事件,这里我们就把已经添加的文件记录清除来解决该问题

html(给el-upload添加ref属性)

  点击上传  
只能上传jpg/png文件,且不超过500kb

javascript(使用一个变量保存已上传的文件)

handleChange(file) {    this.file = file;    this.$refs.upload.clearFiles(); // 清空文件}

问题2:file与form表单数据一起提交

/** 保存 */saveUpload() {      if (!this.file) return this.$message.warning("请选择文件")        this.param = new FormData()        // 文件      this.param.append("file", this.file.raw, this.file.name)        // ID        this.param.append("id", this.id)        const token = JSON.parse(localStorage.getItem("token")) || ""        // 设置请求头        let config = {             headers: {             "Content-Type": "multipart/form-data",             "Authorization": token         }       };       axios.post(this.uploadUrl, this.param, config).then(              response => { console.log("res", response) },              err => { reject(err); }        ).catch((error) => { reject(error) })}

至此,问题总结记录完毕

关键词:


您可能也喜欢这些文章

Copyright   2015-2022 南极音箱网 版权所有  备案号:粤ICP备2022077823号-13   联系邮箱: 317 493 128@qq.com