标签：el vue 文件 upload param file message 上传 id

上传文件

手动上传

          <el-upload
            class="add-upload"
            ref="add-upload"
            drag
            action
            multiple
            :auto-upload="false"
            :file-list="fileList"
            :limit="1"
            :on-exceed="handleExceed"
            :on-change="handleChange"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">
              上传文件只能为excel文件，且为xlsx、xls格式
            </div>
          </el-upload>

    // 文件上传数量判断
    handleExceed(e) {
      this.$message({
        type: 'warning',
        message: '只能上传一个文件!'
      })
    },
    // 文件格式判断
    handleChange(file, fileList) {
      if (!/\.(xlsx|xls|XLSX|XLS)$/.test(file.name)) {
        this.$message({
          type: 'warning',
          message: '上传文件只能为excel文件!'
        })
        this.fileList = []
        return false
      }
      this.file = file.raw // 手动上传需要保存 file.raw
    },
	// 根据触发条件触发对应请求函数 将 this.file 传入就行

自动上传

     <el-upload
            ref="upload"
            action
            drag
            :auto-upload="true"
            :http-request="fileUpload"
            :before-upload="beforeUpload"
            :limit="1"
            :file-list="fileList"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>更新文件
            </div>
            <div class="el-upload__tip" slot="tip">
              上传文件只能为pdf文件
            </div>
          </el-upload>

    fileUpload(file) {
	 // file 是 element 处理过的 raw 数据，不需要单独保存了
        updateFile(this.row.id, file).then(res => {
          this.$message({
            type: 'success',
            message: '上传文件成功!'
          })
          this.fileList = []
        })
      }
    },

请求设置

function updateFile(id, file) {
  let param = new FormData()
  // param.append('file', file) // 手动上传
  param.append('file', file.file) // 自动上传
  return request({
    url: `/request/upload-file?id=${id}`,
    method: 'post',
    headers: { 'Content-Type': 'multipart/form-data' },
    data: param
  })
}

标签：el,vue,文件,upload,param,file,message,上传,id
来源： https://www.cnblogs.com/cqkjxxxx/p/15405499.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。