el-upload 与 FormData上传文件

最新推荐文章于 2024-08-05 15:11:23 发布

cofecode

最新推荐文章于 2024-08-05 15:11:23 发布

阅读量2w

点赞数

分类专栏： element-ui

本文链接：https://blog.csdn.net/cofecode/article/details/78083088

版权

这篇博客讲述了如何在Vue项目中利用el-upload组件的on-change回调和FormData，配合XMLHttpRequest实现文件上传。作者遇到el-upload点击上传不触发action的情况，选择在on-change事件中直接写入原生上传逻辑，通过xhr.responseText获取服务器返回的图片URL，并提醒读者注意在xhr.onload中使用箭头函数以确保this指向Vue实例。

摘要由CSDN通过智能技术生成

最近在用el-upload做上传图片的功能，用的el-uplod中的点击上传做。但是
点击上传的时候。不会触发action中的post请求，所以就干脆在on-change函数里写入原生的FormData上传文件的方法。

getImgUrl () {
    var fileValue = document.querySelector('.el-upload .el-upload__input')
    var fd = new window.FormData()
    // 配置post请求的参数。参数名file,后面跟要传的文件，参数名fileType，值为category（看后端的具体要求）
    fd.append('fileType', 'category')
    fd.append('file', fileValue.files[0])
    var xhr = new