element-ui文件上传_elementui上传pdf文件-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45856221/article/details/128206480

本文介绍了一个基于Vue框架的文件上传组件的具体配置及使用方法。该组件支持多种文件格式(doc, docx, pdf)的上传，并通过自定义头部信息进行认证。文章详细解释了如何设置上传动作、限制文件重复上传、处理成功与失败的情况，以及如何管理和展示已上传的文件列表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-upload ref="uploadDemo"
            class="upload-demo"
            multiple
            accept=".docx,.doc,.pdf"
            :headers="headerData"
            :action="actionUrl"
            :file-list="fileList"
            :before-upload="beforeUpload"
            :on-success="onSuccess"
            :on-error="onError">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">支持上传文件格式：doc .docx .pdf,文件大小不超过2M</div>
          </el-upload>
          
          
data:{
	return{
		photoList: [],
      	photoList2:[],
      	actionUrl: this.$config.VUE_APP_API_HOST_DEFAULT + '/file/upload',
	}
}


computed: {
    /****以下文件上传所用**/
    headerData() {
      return {
        Authorization: getAccessToken(),
        timestamp: String(new Date().getTime()),
        sign: ''
      }
    }
  },
  
  
methods:{  
/*****以下文件上传所用*******/
    beforeUpload(file, fileList) {
      console.log(file, fileList)
      let flag = true
      this.photoList.forEach(item=> {
        if (item.name === file.name) {
          this.$message.error('"'+file.name + '"文件重复');
          flag = false
        }
      })
      return flag
    },
    onSuccess(response, file, fileList) {
      console.log(response, file, fileList)
      if (response && response.code === 200) {
        this.photoList2.unshift({
          id: response.data.fileId,
          name: file.name,
          size: file.size
        })
      } else {
        this.$message.error(response ? response.msg : '文件上传失败');
        if (fileList) {
          fileList.forEach((item,index)=> {
            if (item.response && item.response.code !== 200) {
                fileList.splice(index,1)
            }
          });
        }
      }
      if (fileList.length === this.photoList2.length) {
        this.$refs['uploadDemo'].clearFiles()
        this.photoList = this.photoList2.concat(this.photoList)
        this.photoList2 = []
      }
    },
    onError(e, file, fileList) {
      console.log(e, file, fileList)
      this.$message.error('"'+file.name +'"上传失败');
    },
}