element-ui解决上传文件时需要携带请求数据的问题

一、问题描述

在前端使用element-ui进行文件上传时,需要携带请求头信息,比如Token

二、问题解决

1. 表单实现

  1. action置空
  2. 添加:http-request属性覆盖默认的上传行为,实现自定义上传文件。
  3. 注意:src后的图片路径如果是个网络请求(外链),那么在前面拼接//即可,否则会出现localhost:8080/外链的奇葩问题。
html 复制代码
<el-upload
	class="avatar-uploader"
	name="img"
	action=""
	:show-file-list="false"
	:on-success="handleAvatarSuccess"
	:before-upload="beforeAvatarUpload"
	:http-request="handleUploadAvatar">
	<img v-if="userInfoObj.avatar" :src="userInfoObj.avatar?'//'+userInfoObj.avatar:'static/img/tou.jpg'"  :onerror="$store.state.errorImg" class="avatar">
	<i v-else class="el-icon-plus avatar-uploader-icon"></i>
	<div slot="tip" class="el-upload__tip">点击上传头像,只能上传jpg/png文件,且不超过1mb</div>
</el-upload>

2. js代码

  1. 创建handleUploadAvatar()函数,传入参数param,其中的param就是表单的文件对象。
  2. 创建FormData对象,封装请求体作为请求数据,将文件对象里面的文件以及需要携带的请求数据封装(比如需要携带id信息等)进请求体。
  3. 创建url,即请求地址。
  4. 创建config对象,配置请求头信息,注意文件上传时,Content-Type必须为multipart/form-data
  5. 使用axios发起post请求。
  6. 注意此时element-ui组件上的:on-success="handleAvatarSuccess"会不生效,因为禁用了action这个默认实现方式 ,要想在上传文件成功后调用on-success 声明的函数,只需要手动调用一下即可。
js 复制代码
<script>
import store from '../store'
import axios from 'axios'
import {getToken} from '../utils/auth.js'
	export default {
        name: 'UserInfo',
        data() { //选项 / 数据
            return {
                uploadURL:'',
                userInfo:{},
                userInfoObj:'',
            }
        },
        methods: {
            beforeAvatarUpload(file) {// 上传头像成功前校验
                const isJPG = file.type == 'image/png'||file.type=='image/jpg'||file.type=='image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 1;
                if (!isJPG) {
                  this.$message.error('上传头像图片只能是 JPG/JPEG/PNG 格式!');
                }
                if (!isLt2M) {
                  this.$message.error('上传头像图片大小不能超过 1MB!');
                }
                return isJPG && isLt2M;
            },
            handleUploadAvatar(param) {
                let fileObj = param.file // 相当于input里取得的files
                let fd = new FormData()// FormData 对象
                fd.append('img', fileObj)// 文件对象
                let url = this.uploadURL
                let config = {
                    headers: {
                        'Content-Type': 'multipart/form-data',
                        Token: getToken()
                    }
                }
                axios.post(url, fd, config).then(res => {
                    if(res.status === 200){
                    	// 将服务端返回的数据传递给文件上传成功的函数
                        param.onSuccess(res.data)
                    }
                })
            },
            handleAvatarSuccess(res, file) {// 上传头像成功后赋值
                if(res.code == 200){
                    this.userInfoObj.avatar = res.data;
                }else{
                    this.$message.error('上传图片失败');
                }
            }
        },
        created() {
            this.uploadURL = store.state.baseURL + 'upload'
        }
    }
</script>
相关推荐
明月清风徐徐8 分钟前
Vue实训---2-路由搭建
前端·javascript·vue.js
王解17 分钟前
速度革命:esbuild如何改变前端构建游戏 (1)
前端·vite·esbuild
葡萄城技术团队24 分钟前
使用 前端技术 创建 QR 码生成器 API1
前端
DN金猿26 分钟前
Vue移动端网页(H5)预览pdf文件(pdfh5和vue-pdf)(很详细)
前端·vue.js·pdf
鸽鸽程序猿34 分钟前
【前端】javaScript
开发语言·前端·javascript
秦时明月之君临天下42 分钟前
React和Next.js的相关内容
前端·javascript·react.js
上官花雨1 小时前
什么是axios?怎么使用axios封装Ajax?
前端·ajax·okhttp
米奇妙妙wuu1 小时前
React中 setState 是同步的还是异步的?调和阶段 setState 干了什么?
前端·javascript·react.js
李刚大人1 小时前
react-amap海量点优化
前端·react.js·前端框架
闹闹没有闹2 小时前
socket连接封装
前端