el-upload with-credentials属性

时间: 2023-11-02 19:57:58 浏览: 136

vue-cli3.0+element-ui上传组件el-upload的使用

5星 · 资源好评率100%

在Vue.js开发中，Element UI 是一款非常流行的前端UI库，它提供了丰富的组件，使得开发者能够快速构建美观的用户界面。在本篇文章中，我们将详细探讨如何在vue-cli3.0环境中使用Element UI的上传组件el-upload。el-upload组件允许用户上传文件，并且可以进行一系列的定制和限制，以满足各种需求。 `<el-upload>`组件的基本用法是在模板中创建一个元素，通过属性来控制它的行为。例如： ```html <el-upload class="upload-demo" :limit="limit" :action="action" :accept="accept" :data="data" :multiple="multiple" :show-file-list="showFileList" :on-exceed="handleExceed" :with-credentials="withcredentials" :before-upload="handleBeforeUpload" :on-progress="handleProgress" :on-success="handleSuccess" :on-error="handleError"> <el-button size="small" type="primary">上传</el-button> </el-upload> ``` 在上述代码中： - `limit` 用于限制可上传的文件数量。 - `action` 指定文件上传的URL。 - `accept` 接受的文件类型，如".jpg,.png"。 - `data` 可以传递额外的参数到服务器。 - `multiple` 是否支持多选文件，设置为`true`则开启。 - `show-file-list` 是否显示已上传文件的列表。 - `with-credentials` 是否发送cookies，通常用于处理登录状态。 - `before-upload` 在文件上传前的钩子，可以进行拦截。 - `on-exceed` 当超过限制时的回调。 - `on-progress` 文件上传过程中的进度回调。 - `on-success` 文件上传成功时的回调。 - `on-error` 文件上传失败时的回调。对于文件上传的限制，可以通过以下两个钩子函数实现： 1. `handleExceed`：当文件个数超出限制时触发，例如限制为20个文件，超出则提示错误并阻止上传。 ```javascript private handleExceed(files, fileList) { if (fileList.length > 20) { this.$message.error('最多允许上传20个文件'); return false; } } ``` 2. `handleBeforeUpload`：在文件上传前执行，可以做大小和类型的限制，例如限制文件大小不超过5MB和指定文件类型。 ```javascript private handleBeforeUpload(file) { const isLt5M = file.size / 1024 / 1024 < 5; if (!isLt5M) { this.$message.error('不得超过5M'); return isLt5M; } const name = file.name ? file.name : ''; const ext = name ? name.substr(name.lastIndexOf('.') + 1, name.length) : true; const isExt = this.accept.indexOf(ext) < 0; if (isExt) { this.$message.error('请上传正确的格式类型'); return !isExt; } // 将文件信息添加到自定义的列表中 this.objAddItem(this.tempArr, file); } ``` 在上传过程中，`handleProgress`钩子用于更新进度条的值，例如： ```javascript private handleProgress(event, file, fileList) { this.tempArr.forEach((element, index) => { if (element.uid === file.uid) { const progress = Math.floor(event.percent); element.progress = progress === 100 ? 99 : progress; } }); } ``` 以上就是关于vue-cli3.0+element-ui上传组件el-upload的使用介绍。通过自定义这些属性和钩子函数，我们可以灵活地控制文件上传的过程，满足各种业务场景的需求。在实际开发中，还可以结合axios等HTTP库进行更复杂的请求处理，以及利用Element UI提供的其他功能，如自定义上传列表样式、上传失败重试等，来提升用户体验。

el-upload的with-credentials属性用于指定是否发送凭据（例如cookie、HTTP身份验证等）到服务器。根据引用中提供的代码，with-credentials属性被设置为true，表示将发送凭据到服务器。这可以确保在跨域请求中携带cookie和认证信息。如果with-credentials属性被设置为false，则不会发送凭据到服务器。

阅读全文

el-upload with-credentials属性

相关推荐

credentials-java-0.2.4.jar

plain-credentials-plugin

el-upload 属性

el-upload属性详解

vue中el-upload属性

el-upload所有属性

el-upload 所有属性

el-upload 自定义

el-upload 用法

初识el-upload组件：实现简单的文件上传功能

el-upload参数解释

el-upload附带参数

el-upload上传文件接口参数

修改el-upload 默认圆圈进度条样式

el-upload 上传同名图片不刷新

el-upload 切片计算大文件sha256

el-upload用on-change获取不到blob文件

Vue + Element-UI 实现导入导出功能详解

vue3的element-ui自定义file插槽

最新推荐

2000-2021年中国科技统计年鉴（分省年度）面板数据集-最新更新.zip

PPT保护工具PDFeditor专业版-精心整理.zip

Spring Boot Docker 项目：含项目构建、镜像创建、应用部署及相关配置文件，容器化部署.zip

考研英语真题及详解-精心整理.zip

Jupyter_AI 人工智慧開發入門.zip

高清艺术文字图标资源，PNG和ICO格式免费下载

管理建模和仿真的文件

DMA技术：绕过CPU实现高效数据传输

SGM8701电压比较器如何在低功耗电池供电系统中实现高效率运作？

mui框架HTML5应用界面组件使用示例教程