vue+element ui上传文件,显示的文件参数内容只有uid问题及解决

 更新时间:2026年02月10日 09:50:35   作者:gk_starring  
使用Element UI的el-upload组件上传文件时,如果只包含uid而没有其他信息,是因为没有正确设置content-type为"multipart/form-data",通过使用FormData,文件会被自动转换成二进制流,并且Content-type会被正确设置,最后,提供了一个使用FormData上传文件的示例代码

现象

使用elment uiel-upload组件上传文件,会导致上传的文件参数file里面只包含uid,没有其他信息

  • file : { uid : 52688455 }
  • 其他参数:xxxx

过程

在网上查资料,首先发现,是没有设定content-type为 " multipart/form-data " 由于我是封装了请求的,统一设定axios的请求config,所以我将统一的config删除,然后在每个请求方法中都逐一设定了congfig,发现请求的content-type虽然改变,但是file的值还是只有uid,还是json形式的

后面又想到,可以将文件转变成base64字符串,然后使用json的形式传递,但是这样会让前端和后端的工作量都增大(前端转base64,后端解码成文件),而且太麻烦了,不愿意做

最后发现,可以使用formData来进行参数和文件的传递

FormData 会将文件自动转换成二进制流,并且将header中的Content-type编码类型被设为 "multipart/form-data",这种编码方式被用作文件传输提高传输效率,不再需要自己设定。

如果不使用FormData ,手动设定Content-type编码类型,那么传输的文件将不是二进制,而是一个json的map集合,并且只存在uid

最后放上源码

1、组件代码

<el-dialog title="上传文件" :visible.sync="dialogFormVisible1" class="dia">
              <el-upload ref="upload"  class="upload-demo" drag
                action="https://jsonplaceholder.typicode.com/posts/" multiple
                :on-preview="handlePreview"
                :file-list="fileList" :limit="1"
                :on-exceed="exceed" :auto-upload="false"
                :http-request="handleHttpRequest" :on-change="handleChange"  >
	                <div>
	                	<i class="el-icon-upload"></i>
	                </div>
	                <div class="el-upload__text">
	                  将文件拖到此处,或<em>点击上传</em>
	                </div>
              </el-upload>
              <el-button
                style="margin-top: 20px"
                size="small"
                type="primary"
                @click="submitUpload"
                >上传到服务器</el-button
              >
        </el-dialog>

2、由于我在组件中使用了:auto-upload=“false”,所以我是自定义上传的,action请求地址是无效的,自定义axios请求

handleHttpRequest(param) {
      if(this.fileStatus == 200){
        var formData = new FormData();
        formData.append('file', param.file);
        formData.append('md5', this.mode.md5);
        formData.append('sha1', this.mode.sha1);
        formData.append('fileName', this.mode.fileName);
        formData.append('fileID', this.mode.fileID);
        formData.append('token', this.mode.token);
        formData.append('createTime', this.mode.createTime);
        formData.append('size', this.mode.size);
        getUpload(this.url, formData)
          .then((res) => {
            if (res.data.returnCode == 0) {
              this.dialogFormVisible1 = false;              
              this.init_1();
              this.fileList = null;
              return this.$message.success("上传成功");
            } else {
              this.dialogFormVisible1 = false;
              return this.$message.error(res.data.errMessage);
            }
          })
          .catch((err) => {
            this.dialogFormVisible1 = false;
            return this.$message.error("请求失败!");
          });
      }else if(this.fileStatus == 201 || this.fileStatus == 202){
        this.dialogFormVisible1 = false;
        return this.$message.success("上传成功");
      }else{
        this.dialogFormVisible1 = false;
        return this.$message.error("文件上传实际路径请求失败!");
      }
    },

3、点击提交

submitUpload() {
  this.$refs.upload.submit();
},

扩展 【Base64将文件转成字符串】

1、安装依赖

npm install --save js-base64

或者

cnpm install --save js-base64

2、使用

//在需要使用base64的组件中
let Base64 = require('js-base64').Base64;
const en = Base64.encode(file)//加密
const de= Base64.decode(en);//解密

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue button的@click方法无效钩子函数没有执行问题

    vue button的@click方法无效钩子函数没有执行问题

    这篇文章主要介绍了vue button的@click方法无效钩子函数没有执行问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • Vue3列表移除元素后索引更新实现方法

    Vue3列表移除元素后索引更新实现方法

    这篇文章主要介绍了Vue3列表移除元素后索引更新实现方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-07-07
  • Vue cli构建及项目打包以及出现的问题解决

    Vue cli构建及项目打包以及出现的问题解决

    这篇文章主要介绍了Vue cli构建及项目打包以及出现的问题解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • vue路由传参及获取参数的方式总结

    vue路由传参及获取参数的方式总结

    这篇文章主要介绍了vue路由传参及获取参数的方式总结,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用

    vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用

    在vuex中有四大金刚分别是State, Mutations,Actions,Getters,本文对这四大金刚做了详细介绍,本文重点是给大家介绍vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用,感兴趣的朋友一起看看吧
    2018-04-04
  • 15 分钟掌握vue-next响应式原理

    15 分钟掌握vue-next响应式原理

    这篇文章主要介绍了15 分钟掌握vue-next响应式原理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • 在vue中使用G2图表的示例代码

    在vue中使用G2图表的示例代码

    这篇文章主要介绍了在vue中使用G2图表的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • vue 实现剪裁图片并上传服务器功能

    vue 实现剪裁图片并上传服务器功能

    这篇文章主要介绍了vue 实现剪裁图片并上传服务器功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-03-03
  • vue利用sync语法糖实现modal弹框的项目实践

    vue利用sync语法糖实现modal弹框的项目实践

    本文主要介绍了vue利用sync语法糖实现modal弹框的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • Vue3监听reactive对象中属性变化的方法

    Vue3监听reactive对象中属性变化的方法

    在 Vue 3 中,如果你想监听 reactive 对象中的某个属性发生的变化,你可以使用 watch 函数进行监听,watch 函数允许你观察 reactive 对象的某个属性或者整个对象,所以本文给大家介绍了Vue3监听reactive对象中属性变化的方法,需要的朋友可以参考下
    2024-08-08

最新评论