15年软件开发经验 只做源码定制 互联网+定制化解决方案

15年软件开发经验,只做源码定制!

原创设计 定制开发

满足您的个性化需求

当前位置:首页 前端开发 vue/vuex

vue文件上传与表单数据和文件一起上传的问题 formdata数据与qs.stringify()

| 发布于 2022-07-09 15:50:33| 901阅读| 0点赞| 0评论
举报

vue 多文件上传/文件上传 以及 表格数据多输入框一起上传的问题,注意:qs.stringify()仅仅支持对普通input框的序列化,对file文件类型不能序列号,文件上传用formdata来序列化!

上传文件的控件,用element-ui 的uplaod


<el-upload
          drag
          action
          :on-change="handleChange"//当改变的时候,触发的事件
          :show-file-list="false"//是否显示所传递的文件列表
          :http-request="handleUpload"//覆盖默认的上传行为
        >
          <el-button size="mini" class="import-button">
            <img src="../images/daoru.png" class="daochu-icon" />导入
          </el-button>
          <div class="el-upload__text">点击或将文件拖到这里上传</div>
        </el-upload>

vue部分:先获取到 file文件的属性,同时用创建空的formdata数据,添加对象


 let file = event.target.files
      let formData = new FormData()
      formData.append('category', 'settingPic')
      formData.append('file', file[0])
      console.log(formData);

最后一步:上传文件 axios的post方法上传文件,注意请求头设置,headers:{'Content-Type':'multipart/form-data'}


this.$axios({
        method: "POST",
        url: url_g + '/dcas/event/'+this.contrastId+'/importathlete',
        data: formData
      }).then((res) => {
});

这就完成了文件上传。

如果是表格数据和文件一起上传,需要把input框的数据,用formdata的append方法都添加到fomedata的对象里。

0

0条评论

别默默看啦~登录/注册一起参与讨论吧~

热门标签

微信扫一扫立即咨询
账号登录|扫码登录

立即注册 |忘记密码?

欢迎注册

已有账号马上登录

重置密码

扫码绑定微信
微信扫一扫

绑定手机号

分享到-微信

举报

  • 举报类型:

  • 举报描述:

您好,当前积分不足。

在线客服
拨打电话
17330196230 13230981129
顶部