vue formData上傳圖片以及其他表單數(shù)據(jù)

jokester 發(fā)布于2019-08-23 18:02 / 3275人閱讀

摘要：可以實現(xiàn)圖片上傳，但是如果在上傳圖片的同時也要上傳其他數(shù)據(jù)呢且其他數(shù)據(jù)不通過對象方式傳給后臺，而是依然通過數(shù)據(jù)格式傳遞代碼如下圖片其他數(shù)據(jù)格式上傳上傳接口添加成功添加失敗

formData可以實現(xiàn)圖片上傳，但是如果在上傳圖片的同時也要上傳其他數(shù)據(jù)呢？且其他數(shù)據(jù)不通過對象方式傳給后臺，而是依然通過json數(shù)據(jù)格式傳遞

代碼如下：

    submitBtn () {
          let formData = new FormData()
          formData.append("file",this.file)//圖片
          let params = {
            contentId: this.pictureId,
            description: this.detailForm.desc,
          }//其他數(shù)據(jù)
            formData.append("contentId",params.contentId)//json格式上傳
            formData.append("description",params.description)
            
          maintain.addFasMaintainInfoRecord(formData)//上傳接口
            .then((res) => {
              this.$Message.success("添加成功")
            })
              .catch((err) => {
                this.$Message.error("添加失敗")
              })
        },

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/104575.html

相關(guān)文章

基于Vue + Node.js + MongoDB的圖片上傳組件，實現(xiàn)圖片的預(yù)覽和刪除

摘要：網(wǎng)址功能單圖多圖上傳圖片上傳預(yù)覽上傳進度條分組上傳，分組查詢新建分組，刪除分組刪除圖片選擇圖片目錄結(jié)構(gòu)前端利用搭建，中引入子組件。實現(xiàn)分組的新增查詢刪除。利用模塊實現(xiàn)刪除文件功能。公司要寫一些為自身業(yè)務(wù)量身定制的的組件，要基于Vue,寫完后擴展了一下功能，選擇寫圖片上傳是因為自己之前一直對這個功能比較迷糊，所以這次好好了解了一下。演示在網(wǎng)址打開后的show.gif中。使用技術(shù)：Vu...

hzx 2019-06-26 17:30 評論0 收藏0
Element-ui實現(xiàn)合并多圖上傳（一次請求多張圖片）

摘要：實現(xiàn)多圖上傳主要用到以下兩個屬性是自帶多圖上傳的，但是細心的朋友可能發(fā)現(xiàn)默認多圖的實現(xiàn)可能和我們預(yù)期有些出入，有截圖可以看出，實質(zhì)是進行多次請求在上傳事件觸發(fā)后，多圖上傳的默認實現(xiàn)調(diào)用了三次請求。前言工作中碰到需要多圖上傳，在使用element-ui解決過程中碰到一些問題，在這里分享給大家。環(huán)境： Springboot+Vue+Element-ui 正文這次上傳使用的是Elem...

loostudy 2019-08-19 10:51 評論0 收藏0
動態(tài)生成form表單,不再為表單煩惱

摘要：具有數(shù)據(jù)收集校驗和提交功能的表單生成器，支持雙向數(shù)據(jù)綁定和事件擴展，組件包含有復(fù)選框單選框輸入框下拉選擇框等表單元素以及省市區(qū)三級聯(lián)動時間選擇日期選擇顏色選擇滑塊評分框架樹型文件圖片上傳等功能組件。 form-create 具有數(shù)據(jù)收集、校驗和提交功能的表單生成器，支持雙向數(shù)據(jù)綁定和事件擴展，組件包含有復(fù)選框、單選框、輸入框、下拉選擇框等表單元素以及省市區(qū)三級聯(lián)動,時間選擇,日期選擇,...

kamushin233 2019-08-22 14:53 評論0 收藏0
Vue2.0利用vue-resource上傳文件到七牛

摘要：年底，公司項目番茄表單的前端部分，開始了從傳統(tǒng)的到的徹底重構(gòu)。上傳流程圖不重要看文字事件觸發(fā)后，先去如果是圖片，可以同時通過以及將圖片預(yù)覽在頁面上后臺請求七牛的上傳，將拿到的和以及通過傳遞過來的一起到中。關(guān)于上傳，總是有很多可以說道的。16年底，公司項目番茄表單的前端部分，開始了從傳統(tǒng)的jquery到vue 2.0的徹底重構(gòu)。但是上傳部分，無論是之前的傳統(tǒng)版本，還是Vue新版本，都是...

lcodecorex 2019-08-20 14:34 評論0 收藏0
Vue上傳圖片

摘要：最近寫上傳圖片功能，一直不理解是怎么實現(xiàn)的，今天看了后端的接口實現(xiàn)，才知道大致流程。將此返回的內(nèi)容當做標簽的即可，展示圖片表單實現(xiàn)圖片上傳接口實現(xiàn)推薦的取到上傳的圖片由打印的可以看到，圖片信息就在里面通過上傳圖片上傳接口最近寫上傳圖片功能，一直不理解是怎么實現(xiàn)的，今天看了后端的接口實現(xiàn)，才知道大致流程。后臺接口接受一個input提交的文件，將其保存，并將文件名返回。將此返回的內(nèi)容當做...

EasonTyler 2019-08-20 16:03 評論0 收藏0