600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > 使用elementui实现表单上传功能_使用ElementUI中的upload组件上传Excel文件

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

时间:2021-08-30 07:31:14

相关推荐

使用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', Id)

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,对他进行一个转化,但是同样遇到上述报错。

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。