el-upload 上传图片文件方法

好文链接

覆盖action的默认请求行为是必要的 http-request，自定义上传方法

Content-Type 设置成 form-data

Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryBicOUjQSEgA1dSB1

以 formData 格式处理data

let files = new FormData()
files.append('file', xxxfile)
// 发起 post 请求
function uploadapi(data) {return axios.post('url', {headers:{'Content-Type':'multipart/form-data'}})
}

使用 el-upload 组件做上传交互

<el-uploadaction="#"ref="upload"accept=".xls,.xlsx" :show-file-list="false":http-request="upload"
><el-buttontype="text"icon="el-icon-upload"style="float: right">上传附件</el-button>
</el-upload>

upload(param) {const data = new FormData()data.append('file', param.file) // 'file'为name 需规定清楚uploadapi(data).then(res => {if (res.success) {this.$message.success(res.message)// 涉及到刷新}})
}

插槽

default 自定义默认内容
trigger 触发文件选择框的内容
tip 提示说明文字
file 缩略图模板的内容 { file: UploadFile }

格式需要在上传前进行校验 before-upload
accept 仅在文件选择时自动筛选，可被手动取消

显示文件列表 file-list
自动上传 auto-upload

默认方法是单个文件提交的

el-upload 上传图片文件方法相关推荐

使用el upload标签上传文件的几种常见使用场景（前台+后台）
前言:本篇博客主要介绍ElementUI中el upload上传控件的使用,包含前后台代码. 文章目录一.总体代码二.使用场景 1.添加 2.修改 3.单独上传到服务器一.总体代码 1.前端控件 ...
php上传图片文件常用的几个方法
1. 前台 <form class="add-form" method="post" action="/person/save" en ...
layui上传文件php上传接口异常,layui.upload上传图片报错“请求上传接口出现异常”...
layui.upload上传图片报错"请求上传接口出现异常"且接口报404问题在调试layui.upload上传图片时候报错"请求上传接口出现异常": 且接口 ...
upload传文件时提示“ 对象不支持此属性或方法: 'form'”
upload传文件时提示" 对象不支持此属性或方法: 'form'" 出现此种错误提示,如果是因为:待上传的文件名称中包含了汉字等非字母数字字符,只要修改文件名即可解决.
【OkHttp】OkHttp 上传图片 ( 获取 SD 卡动态权限 | 跳转到相册界面选择图片 | 使用 OkHttp 上传图片文件 )
OkHttp 系列文章目录 [OkHttp]OkHttp 简介 ( OkHttp 框架特性 | Http 版本简介 ) [OkHttp]Android 项目导入 OkHttp ( 配置依赖 | 配置 ...
php页面运用文本编辑器的实例,TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析...
本文实例讲述了TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法.分享给大家供大家参考,具体如下: 最近项目里要添加编辑器,以为CKeditor比较出名,所以研究了一下... 1.下载 ...
ssm上传图片文件到ftp（图片压缩处理）
##ssm上传图片文件到ftp(图片压缩处理) ## 开发工具 Eclipse 1.引入jar包 jar包下载地址:阿里中央仓库 2.配置spring-mvc.xml,添加以下代码 <bean ...
Element Upload 上传图片
最近跟element结下不解之缘,很多地方用到组件. 这篇文章主要记录使用Element Upload 上传图片组件的过程. Upload 上传图片组件:https://element.eleme.c ...
java调用el_[Java教程][javaEE] EL表达式调用java方法
[Java教程][javaEE] EL表达式调用java方法 0 2016-07-03 18:00:03 1.新建个类,类里面定义静态方法 package com.tsh.utils;import j ...

el-upload 上传图片文件方法

Content-Type 设置成 form-data

以 formData 格式处理data

使用 el-upload 组件做上传交互

el-upload 上传图片文件方法相关推荐

最新文章

热门文章