热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

vueantdesign使用自定义上传(customRequest)无法显示进度条

问题描述项目中需要自定义上传,除了上传file文件还需要上传其他字段问题出现的环境背景及自己尝试过哪些方法尝试使用vue-ant-des

问题描述

项目中需要自定义上传,除了上传file文件还需要上传其他字段

问题出现的环境背景及自己尝试过哪些方法

尝试使用vue-ant-design 的upload customRequest 方法,将formData 通过自己的接口发送,成功是成功了,但是进度条不显示

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
    class="upload_file"

    name="file"

    :multiple="false"

    action="/ats/candidates/resume/fileSave"

    :customRequest="customRequest"

    :beforeUpload="beforeUpload"

    :headers="{'Content-Type': 'application/x-www-form-urlencoded'}"

    :showUploadList="showUploadList"

    :fileList="fileList"

    :remove="removeFile"

    @change="uploadChange">

   



     

   



   

点击或拖拽文件到此处



 

  uploadChange (info) {

  console.log(info)

  let fileList = info.fileList

  fileList = fileList.slice(-1)

  if (info.file.status !== 'uploading') {



  }

  if (info.file.status === 'done') {

  } else if (info.file.status === 'error') {

  }

  this.fileList = fileList

},

async customRequest (data) {

  const formData = new FormData()

  formData.append('file', data.file)

  formData.append('hrSitType', this.createCandidate.channel.id)

  formData.append('positionId', this.createCandidate.position.id)

  data.onProgress()

  let res = await resumeFileSave(formData)

  console.log(data)

  this.resCb(res, (res) => {

    if (res.code === 1116) {

      data.onError()

    } else if (res.code === 1117) {

      data.onSuccess()

    } else if (res.code === 1500) {

      data.onError()

    } else if (res.code === 200) {

      data.onSuccess()

    } else {

      data.onError()

    }

  })

},

removeFile (e) {

  console.log(e)

  return true

},

beforeUpload (file, fileList) {

  const reg = /\.(doc|docx|html|pdf|txt|mht|jpg|png|zip)(\?.*)?$/

  return new Promise((resolve, reject) => {

    if (reg.test(file.name)) {

      resolve()

    } else {

      this.$message.error(`请上传正确的文件格式`)

      reject(new Error('请上传正确的文件格式'))

    }

  })

}


你期待的结果是什么?实际看到的错误信息又是什么?

如何才能显示进度条呢?

题目描述


题目来源及自己的思路



推荐阅读
  • 本文介绍了在Vue项目中如何结合Element UI解决连续上传多张图片及图片编辑的问题。作者强调了在编码前要明确需求和所需要的结果,并详细描述了自己的代码实现过程。 ... [详细]
  • AFNetwork框架(零)使用NSURLSession进行网络请求
    本文介绍了AFNetwork框架中使用NSURLSession进行网络请求的方法,包括NSURLSession的配置、请求的创建和执行等步骤。同时还介绍了NSURLSessionDelegate和NSURLSessionConfiguration的相关内容。通过本文可以了解到AFNetwork框架中使用NSURLSession进行网络请求的基本流程和注意事项。 ... [详细]
  • 如何实现织梦DedeCms全站伪静态
    本文介绍了如何通过修改织梦DedeCms源代码来实现全站伪静态,以提高管理和SEO效果。全站伪静态可以避免重复URL的问题,同时通过使用mod_rewrite伪静态模块和.htaccess正则表达式,可以更好地适应搜索引擎的需求。文章还提到了一些相关的技术和工具,如Ubuntu、qt编程、tomcat端口、爬虫、php request根目录等。 ... [详细]
  • 基于layUI的图片上传前预览功能的2种实现方式
    本文介绍了基于layUI的图片上传前预览功能的两种实现方式:一种是使用blob+FileReader,另一种是使用layUI自带的参数。通过选择文件后点击文件名,在页面中间弹窗内预览图片。其中,layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块,并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]
  • 图像因存在错误而无法显示 ... [详细]
  • 在tp5项目中引入ueditor编辑器并实例化后插入图片出现目录创建失败问题在查看网络上各种解决方案之后总结如下:根据官网提示主要是因为图片保存的路径无权限导致,官方文档链接:ht ... [详细]
  • 校园表白墙微信小程序,校园小情书、告白墙、论坛,大学表白墙搭建教程
    小程序的名字必须和你微信注册的名称一模一样在后台注册好小程序。mp.wx-union.cn后台域名https。mp.wx-union.cn ... [详细]
  • 本文介绍了高校天文共享平台的开发过程中的思考和规划。该平台旨在为高校学生提供天象预报、科普知识、观测活动、图片分享等功能。文章分析了项目的技术栈选择、网站前端布局、业务流程、数据库结构等方面,并总结了项目存在的问题,如前后端未分离、代码混乱等。作者表示希望通过记录和规划,能够理清思路,进一步完善该平台。 ... [详细]
  • 本文讨论了在手机移动端如何使用HTML5和JavaScript实现视频上传并压缩视频质量,或者降低手机摄像头拍摄质量的问题。作者指出HTML5和JavaScript无法直接压缩视频,只能通过将视频传送到服务器端由后端进行压缩。对于控制相机拍摄质量,只有使用JAVA编写Android客户端才能实现压缩。此外,作者还解释了在交作业时使用zip格式压缩包导致CSS文件和图片音乐丢失的原因,并提供了解决方法。最后,作者还介绍了一个用于处理图片的类,可以实现图片剪裁处理和生成缩略图的功能。 ... [详细]
  • SpringMVC接收请求参数的方式总结
    本文总结了在SpringMVC开发中处理控制器参数的各种方式,包括处理使用@RequestParam注解的参数、MultipartFile类型参数和Simple类型参数的RequestParamMethodArgumentResolver,处理@RequestBody注解的参数的RequestResponseBodyMethodProcessor,以及PathVariableMapMethodArgumentResol等子类。 ... [详细]
  • 如何在php文件中添加图片?
    本文详细解答了如何在php文件中添加图片的问题,包括插入图片的代码、使用PHPword在载入模板中插入图片的方法,以及使用gd库生成不同类型的图像文件的示例。同时还介绍了如何生成一个正方形文件的步骤。希望对大家有所帮助。 ... [详细]
  • 本文介绍了一个免费的asp.net控件,该控件具备数据显示、录入、更新、删除等功能。它比datagrid更易用、更实用,同时具备多种功能,例如属性设置、数据排序、字段类型格式化显示、密码字段支持、图像字段上传和生成缩略图等。此外,它还提供了数据验证、日期选择器、数字选择器等功能,以及防止注入攻击、非本页提交和自动分页技术等安全性和性能优化功能。最后,该控件还支持字段值合计和数据导出功能。总之,该控件功能强大且免费,适用于asp.net开发。 ... [详细]
  • 本文介绍了使用FormData对象上传文件同时附带其他参数的方法。通过创建一个表单,将文件和参数添加到FormData对象中,然后使用ajax发送POST请求进行文件上传。在发送请求时,需要设置processData为false,告诉jquery不要处理发送的数据;同时设置contentType为false,告诉jquery不要设置content-Type请求头。 ... [详细]
  • 我尝试使用Vue.js在Laravel中实现imageupload吗?但是,我不知道为什么图像 ... [详细]
  • fileuploadJS@sectionscripts{<scriptsrc~Contentjsfileuploadvendorjquery.ui.widget.js ... [详细]
author-avatar
歪果仁
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有