vue3如何使用el-upload上传文件
导读:本文共4680.5字符,通常情况下阅读需要16分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: el-upload上传文件在项目开发的过程中上传文件的需求是经常会遇到的,这篇文章我们就详细介绍使用elementplus中el-upload来上传文件了。我们先来看一下el-upload可以配置哪些属性和事件。属性action: 请求urlheaders: 设置上传的请求头部method: 设置上传请求方法multiple: 是否支持多选文件data: 上传时... ...
目录
(为您整理了一些要点),点击可以直达。在项目开发的过程中上传文件的需求是经常会遇到的,这篇文章我们就详细介绍使用elementplus中el-upload来上传文件了。
我们先来看一下el-upload可以配置哪些属性和事件。
action: 请求url
headers: 设置上传的请求头部
method: 设置上传请求方法
multiple: 是否支持多选文件
data: 上传时附带的额外参数
name: 上传的文件字段名
with-credentials: 支持发送cookie凭证信息
以上这些参数都是采用action的默认方式请求时使用的,如果我们使用自定义的请求方法,这些属性基本上都不会使用到。
show-file-list: 是否显示已上传文件列表
drag: 是否启用拖拽上传
accept: 接受上传的文件类型
on-preview: 点击文件列表中已上传文件时的钩子
on-remove: 文件列表移除文件时的钩子
on-success: 文件上传成功时的钩子
on-error: 文件上传失败时的钩子
on-progress: 文件上传时的钩子
on-change: 文件状态改变时的钩子,添加,上传成功和失败都会被调用
on-exceed: 当超出限制时执行的钩子
before-upload: 文件上传之前的钩子,参数为上传的文件, 若返回false
或者返回 Promise
且被 reject,则停止上传。
before-remove: 删除文件之前的钩子,参数为上传的文件和文件列表, 若返回 false
或者返回 Promise
且被 reject,则停止删除。
file-list/v-model:file-list: 默认上传文件
list-type: 文件列表的类型,'text' | 'picture' | 'picture-card'。
auto-upload: 是否自动上传文件
http-request: 覆盖默认的 Xhr 行为,允许自行实现上传文件的请求
disabled: 是否禁用上传
limit: 允许上传文件的最大数量
abort: 取消上传请求
submit: 手动上传文件列表
clearFiles: 清空已上传的文件列表(该方法不支持在 before-upload
中调用)
handleStart: 手动选择文件
handleRemove: 手动移除文件。 file
和rawFile
已被合并。
上传图片的时候我们一般都会重写http请求,不使用默认的action去请求,因此action我们一般都会设置成‘#’。
一般上传文件的话请求头中的Content-Type: multipart/form-data;我们的需求中还需要设置文件的随机数,因此请求头需要是这样的Content-Type: multipart/form-data; boundary=----WebKitFormBoundarypzSlbADtTRuFx5FC。
下面是我遇到的问题。
设置了Content-Type: multipart/form-data;此时请求一直没有随机数boundary=----WebKitFormBoundarypzSlbADtTRuFx5FC。
如果设置了全局的content-type,会发现上传接口设置multipart/form-data是不起作用的,因为没有Boundary,所以上传必定失败,服务器500。
然后尝试手动添加Boundary,这次错误变400了
后来通过查询资料,说不用设置Content-Type: multipart/form-data;只要参数是formData形式,浏览器就会自动将请求头的Content-Type转成Content-Type: multipart/form-data; boundary=----WebKitFormBoundarypzSlbADtTRuFx5FC。
但是我不设置的话就是默认的application/json。
于是查阅资料发现axios的transformRequest属性可以在向服务器发送请求数据之前修改请求数据,因为我们的请求在默认的post请求方式时Content-Type的值是application/json,需要去掉默认的值,这样浏览器就可以自动添加了。
如果还要传其他的参数,其他的参数必须也要append进去,否则可能会报参数错误。
vue3如何使用el-upload上传文件的详细内容,希望对您有所帮助,信息来源于网络。