资讯专栏INFORMATION COLUMN

vue formData上传图片以及其他表单数据

jokester / 3085人阅读

摘要:可以实现图片上传,但是如果在上传图片的同时也要上传其他数据呢且其他数据不通过对象方式传给后台,而是依然通过数据格式传递代码如下图片其他数据格式上传上传接口添加成功添加失败

formData可以实现图片上传,但是如果在上传图片的同时也要上传其他数据呢? 且其他数据不通过对象方式传给后台,而是依然通过json数据格式传递

代码如下:

    submitBtn () {
          let formData = new FormData()
          formData.append("file",this.file)//图片
          let params = {
            contentId: this.pictureId,
            description: this.detailForm.desc,
          }//其他数据
            formData.append("contentId",params.contentId)//json格式上传
            formData.append("description",params.description)
            
          maintain.addFasMaintainInfoRecord(formData)//上传接口
            .then((res) => {
              this.$Message.success("添加成功")
            })
              .catch((err) => {
                this.$Message.error("添加失败")
              })
        },

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/104575.html

相关文章

  • 基于Vue + Node.js + MongoDB的图片上传组件,实现图片的预览和删除

    摘要:网址功能单图多图上传图片上传预览上传进度条分组上传,分组查询新建分组,删除分组删除图片选择图片目录结构前端利用搭建,中引入子组件。实现分组的新增查询删除。利用模块实现删除文件功能。 公司要写一些为自身业务量身定制的的组件,要基于Vue,写完后扩展了一下功能,选择写图片上传是因为自己之前一直对这个功能比较迷糊,所以这次好好了解了一下。演示在网址打开后的show.gif中。 使用技术:Vu...

    hzx 评论0 收藏0
  • Element-ui实现合并多图上传(一次请求多张图片

    摘要:实现多图上传主要用到以下两个属性是自带多图上传的,但是细心的朋友可能发现默认多图的实现可能和我们预期有些出入,有截图可以看出,实质是进行多次请求在上传事件触发后,多图上传的默认实现调用了三次请求。 前言 工作中碰到需要多图上传,在使用element-ui解决过程中碰到一些问题,在这里分享给大家。 环境: Springboot+Vue+Element-ui 正文 这次上传使用的是Elem...

    loostudy 评论0 收藏0
  • 动态生成form表单,不再为表单烦恼

    摘要:具有数据收集校验和提交功能的表单生成器,支持双向数据绑定和事件扩展,组件包含有复选框单选框输入框下拉选择框等表单元素以及省市区三级联动时间选择日期选择颜色选择滑块评分框架树型文件图片上传等功能组件。 form-create 具有数据收集、校验和提交功能的表单生成器,支持双向数据绑定和事件扩展,组件包含有复选框、单选框、输入框、下拉选择框等表单元素以及省市区三级联动,时间选择,日期选择,...

    kamushin233 评论0 收藏0
  • Vue2.0利用vue-resource上传文件到七牛

    摘要:年底,公司项目番茄表单的前端部分,开始了从传统的到的彻底重构。上传流程图不重要看文字事件触发后,先去如果是图片,可以同时通过以及将图片预览在页面上后台请求七牛的上传,将拿到的和以及通过传递过来的一起到中。 关于上传,总是有很多可以说道的。16年底,公司项目番茄表单的前端部分,开始了从传统的jquery到vue 2.0的彻底重构。但是上传部分,无论是之前的传统版本,还是Vue新版本,都是...

    lcodecorex 评论0 收藏0
  • Vue上传图片

    摘要:最近写上传图片功能,一直不理解是怎么实现的,今天看了后端的接口实现,才知道大致流程。将此返回的内容当做标签的即可,展示图片表单实现图片上传接口实现推荐的取到上传的图片由打印的可以看到,图片信息就在里面通过上传图片上传接口 最近写上传图片功能,一直不理解是怎么实现的,今天看了后端的接口实现,才知道大致流程。后台接口接受一个input提交的文件,将其保存,并将文件名返回。将此返回的内容当做...

    EasonTyler 评论0 收藏0

发表评论

0条评论

jokester

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<