elementUi 自定义上传文件

方法一

这里api 自带

//vue
  <el-upload
      ref="upload"
      class="upload-demo"
      action
      :auto-upload="false"
      accept=".xlsx,.xls"
      :limit=limit
      :before-upload="beforeUpload"
      :on-remove="handleRemove"
      :on-exceed="handleExceed"
      :on-change="handleChange"
      :on-success="handleSuccess"
      :on-error="handleError"
      :file-list="form.fileList"
      >
      <el-button size="small" type="text">点击上传</el-button>
  </el-upload>

	//computed
	config () {
      var obj = {
        headers: {
          'Content-Type': 'multipart/form-data',
          'Authorization': `Bearer ${this.$store.state.user.token}`//获取自己token
        }
      }
      return obj
    } 

 //methods
  beforeUpload(file) {
        let extension = file.name.substring(file.name.lastIndexOf('.')+1)
        let size = file.size / 1024 / 1024;
        if(extension !== 'xlsx' && extension !== 'xls') {
          this.$message.warning('只能上传后缀是.xlsx或者.xls的文件')
          return false
        }
        if(size > 10) {
          this.$message.warning('文件大小不得超过10M')
          return false
        }
        return true
    },
    // 删除文件
    handleRemove(file, fileList) {
        this.form.fileList = []
    },
    // 文件上传成功
    handleSuccess(res, file, fileList) {
        this.$message.success('文件上传成功')
    },
    // 文件超出个数限制
    handleExceed(files, fileList) {
        this.$message.warning(`只能选择 ${this.limit} 个文件进行上传!!`)
    },
    // 文件状态改变
    handleChange(file, fileList) {
        if (file) {
            this.form.fileList = fileList.slice(-3)
        }
    },
    // 文件上传失败
    handleError(err, file, fileList) {
        this.$message.error('文件上传失败')
    },

首先关闭自动上传，并给随便给action赋值一个字符串。（action是必填属性）

 action
 :auto-upload="false"

通过:on-change钩子函数，拿到文件列表：

 // 文件状态改变
   handleChange(file, fileList) {
       if (file) {
           this.form.fileList = fileList.slice(-3)
       }
   },

通过自定义的方法 参数从fileList自己定义formdata 然后请求

  let formData = new FormData();
  this.fileList.forEach(item => {
    formData.append("files", item.raw);
  });
	//需要其他参数 append 添加然后 formData作为参数 上传
	//FormData内容的数据，如果直接console是看不到的，需要使用函数来调用，比如get, getAll, 如果要遍历的话，可以使用forEach
	//console.log(formdata.get("files"))
	//console.log(formdata.getAll("files"))
	//formdata.forEach(value => console.log(value))
	 this.axios.post(api, formData, this.config);

最后

以上就是苗条热狗为你收集整理的elementUi 自定义上传文件的全部内容，希望文章能够帮你解决elementUi 自定义上传文件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。