使用elementui实现表单上传功能_使用ElementUI中的upload组件上传Excel文件

最初使用该组件实现图片上传是没有问题的，前后端配合，最终实现想要的效果，组件使用过代码如下:

将文件拖到此处，或点击上传

现在改为使用该组件实现Excel文件上传，组件的使用几乎是不变的，代码如下：

将文件拖到此处，或点击上传

一次只能上传一个文件，仅限text格式，单文件不超过1MB

触发的方法如下代码：

// 上传文件之前的钩子

beforeUpload (file) {

console.log('beforeUpload')

console.log(file.type)

const isText = file.type === 'application/vnd.ms-excel'

const isTextComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'

return (isText | isTextComputer)

// 上传文件个数超过定义的数量

handleExceed (files, fileList) {

this.$message.warning(`当前限制选择 1 个文件，请删除后继续上传`)

// 上传文件

uploadFile (item) {

console.log(item)

const fileObj = item.file

// FormData 对象

const form = new FormData()

// 文件对象

form.append('file', fileObj)

form.append('comId', this.comId)

console.log(JSON.stringify(form))

// let formTwo = JSON.stringify(form)

EnterAPI.iExcel(form).then(response => {

console.log('MediaAPI.upload')

console.log(response)

this.$message.info('文件：' + fileObj.name + '上传成功')

})

}

上述代码是可以跑通的前端代码，我在调试的过程中，遇到问题是报错Status Code: 415 Unsupported Media Type。我在查资料的过程中，部分解决方案都指向content-type，因此我换成使用axios请求，带上content-type：application/json;charset=UTF-8;仍然报同样的错误，同时也有一种解决方式是所传的对象form,对他进行一个转化，但是同样遇到上述报错。

在这之后将问题抛向后台，发现使用该代码请求接口的时候，断点进不去，因此断定是后台接收类型有问题，最终得以解决。

使用elementui实现表单上传功能_使用ElementUI中的upload组件上传Excel文件相关推荐

table中加表单元素怎么验证_使用element-ui +Vue 解决 table 里包含表单验证的问题...
应用场景: 在实际使用中经常会遇到需要在Form表单中使用table表格进行表单提交,同时又需要对table的字段进行校验,效果如图所示: 这个校验中,最关键的问题在于如何给el-form-item ...
ElementUI的表单验证及常用规则
element-cn.eleme.io/#/zh-CN/com- 在官网上有关于form组件的详细介绍这里总结了几个常用的规则,方便下次使用必填,必选,邮箱,手机号,时间,数字,数组,字符长度, ...
elementui 按钮表单_仿ElementUI实现一个Form表单的实现代码
使用组件就像流水线上的工人:设计组件就像设计流水线的人,设计好了给工人使用. 一. 目标仿 ElementUI 实现一个简单的 Form 表单,主要实现以下四点: Form FormItem Inp ...
vue 表单验证正则_vue elementui form表单验证的实现
最近我们公司将前端框架由easyui 改为 vue+elementui .自学vue两周就开始了爬坑之路.业余时间给大家分享一下心得,技术新手加上第一次分享(小激动),有什么不足的地方欢迎大家指正, ...
Element-ui Form表单校验-兜底校验-自定义检验规则
用户登录表单-数据双向绑定 <template><div class="form-container"><el-form label-width=&q ...
基于VUE的ElementUi可视化表单设计器布局器
码农苦码农懂的个人空间工作日志正文基于VUE的ElementUi可视化表单设计器布局器顶原码农苦码农懂发布于 09/11 15:35 字数 1187 阅读 41 收藏 0 点赞 1 评论 ...
element-ui清除表单验证提示语
一.需求描述: 使用了element-ui的表单, 点击发布当物流单号为空时,会出现提示,如果我通过上方下拉框切换了物流名称,我希望能够主动的清除下方的红色提示信息. 二.解决方案 1.编写表单代码, ...
elementUI form表单重置问题
elementUI form表单重置问题问题如果修改了data里的表单form默认值,那么重置以后就是你修改以后的值,而不是data里的值了所以this.$refs.ruleForm.resetF ...
element 表单回显验证_关于vue el-form表单报错的问题
在写el-form表单的时候,遇到了蛮多问题,在这里记录一下. 1.表单验证报错[Element Warn][Form]model is required for validate to work! ...

使用elementui实现表单上传功能_使用ElementUI中的upload组件上传Excel文件

使用elementui实现表单上传功能_使用ElementUI中的upload组件上传Excel文件相关推荐

最新文章

热门文章