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>
相关推荐
喵叔哟32 分钟前
重构代码之取消临时字段
java·前端·重构
还是大剑师兰特1 小时前
D3的竞品有哪些,D3的优势,D3和echarts的对比
前端·javascript·echarts
王解1 小时前
【深度解析】CSS工程化全攻略(1)
前端·css
一只小白菜~1 小时前
web浏览器环境下使用window.open()打开PDF文件不是预览,而是下载文件?
前端·javascript·pdf·windowopen预览pdf
方才coding1 小时前
1小时构建Vue3知识体系之vue的生命周期函数
前端·javascript·vue.js
阿征学IT1 小时前
vue过滤器初步使用
前端·javascript·vue.js
王哲晓1 小时前
第四十五章 Vue之Vuex模块化创建(module)
前端·javascript·vue.js
丶21361 小时前
【WEB】深入理解 CORS(跨域资源共享):原理、配置与常见问题
前端·架构·web
发现你走远了1 小时前
『VUE』25. 组件事件与v-model(详细图文注释)
前端·javascript·vue.js
Mr.咕咕2 小时前
Django 搭建数据管理web——商品管理
前端·python·django