vue+axios+el-upload实现文件上传(带参数):
2020-06-05 07:56
369 查看
本次使用http-request自定义文件上传:
<el-upload class="upload-demo" action="string" :http-request="uploadFile" :limit="1" :show-file-list="false"> <el-button size="small" type="primary">上传头像</el-button> </el-upload>
备注:不要自己设置请求头类型,让浏览器自己解析,如果在main.js中配置了post参数序列化的可能会导致浏览器解析上传文件格式错误(415错误Unsupported Media Type);请将此配置注释掉;
async uploadFile(params) { // 可以在上传之前就行文件类型和大小处理 var formData = new FormData(); formData.append('annex', params.file); console.log(params.file); formData.append('userid', this.sessionInfo.userid); formData.append('sid', this.sessionInfo.session); const { data: res } = await this.$http.post( 'http://219.1:80/updheadimg', formData ); if (res.code !== 0) { return this.message.error('上传头像失败'); } console.log(res); },
第一次在这里发表博客比较简短,希望可以给大家一点帮助,有问题可以在下方一起交流;
相关文章推荐
- vue+elementui el-upload上传文件携带参数
- vue+elementui的table行内实现el-upload文件添加/多文件上传
- Vue上传文件:ElementUI中的upload实现
- 详解Vue+axios+Node+express实现文件上传(用户头像上传)
- vue使用el-upload上传文件及Feign服务间传递文件的方法
- AjaxFileUpload实现文件异步上传(AjaxFileUpload.js文件下载及参数介绍)
- 使用element UI el-upload组件实现视频文件上传及上传进度显示方法总结
- axios+Vue实现上传文件显示进度功能
- vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
- VUE+el-upload调用一次接口同时上传多个文件及表单
- vue使用axios实现文件上传进度的实时更新详解
- elemetUi 组件--el-upload实现上传Excel文件的实例
- Apache Commons fileUpload实现文件上传
- smartupload.jar 实现文件上传下载
- Jquery AjaxUpload实现文件上传
- Servlet利用Commons FileUpload实现文件上传
- jspsmartupload组件实现单个或多个文件上传(上)
- JSP利用SmartUpload组件实现文件上传下载
- 用uploadfile组件实现动态文件上传到ORACLE数据库
- jsp用commons-uploadfiles1.2.1实现文件上传