vue formData上傳圖片以及其他表單數據

jokester 發布于2019-08-23 18:02 / 3254人閱讀

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

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("添加失敗")
              })
        },

GPU云服務器云服務器 formdata上傳文件 vue表單控件圖片數據表單以及其他

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104575.html

基于Vue + Node.js + MongoDB的圖片上傳組件，實現圖片的預覽和刪除

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

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

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

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

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

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

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

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

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

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