【elementUI系列】使用elementUI調(diào)用一次接口同時上傳圖片和文件，同時需要攜帶其他參數(shù)

lavor 發(fā)布于2019-08-23 13:55 / 3286人閱讀

摘要：今天有一個坑，同時要上傳圖片和文件，而且圖片要展示縮略圖，文件要展示列表。我的思路是首先，只上傳附件照片，這個直接看的官方例子就行，不僅僅上傳附件照片，還同時上傳其他參數(shù)。然后，再做上傳照片和文件，上傳其他參數(shù)，其實也就是文件合并。

今天有一個坑，同時要上傳圖片和文件，而且圖片要展示縮略圖，文件要展示列表。

我的思路是：

首先，只上傳附件照片，這個直接看ele的官方例子就行，不僅僅上傳附件照片，還同時上傳其他參數(shù)。

然后，再做上傳照片和文件，上傳其他參數(shù)，其實也就是文件合并。

一、上傳照片和其他參數(shù)

頁面樣式大約就是這樣的，參數(shù)有優(yōu)先級，發(fā)生時間，服務(wù)單名稱，服務(wù)單描述，圖片附件上傳。

（一）視圖部分代碼：

確定
說明：

1、action變量為后端圖片接口的地址

2、beforeUpload方法是指的上傳之前觸發(fā)的函數(shù)，可以用來做前端文件格式判斷，文件大小判斷

3、on-change方法是指每次選擇文件都會觸發(fā)函數(shù)，可以用來前端刪除和添加照片

4、list-type屬性指的是照片picture-card展示的方式

5、name指的是上傳的文件字段名，這是后端確認文件流的字段名，可以隨便寫

6、data屬性指的是上傳時附帶的額外參數(shù)，這是指的其他參數(shù)

7、limit屬性指的是上傳文件的個數(shù)極限。

8、multiple屬性指的是可以每次多選文件，true為多選，false為單選

9、auto-upload屬性指的是自動上傳的，true為可以自動上傳，false為不可以自動上傳

10、on-preview方法指的是查看縮略圖的方法

11、on-remove方法指的是刪除文件的方法

12、ref綁定dom元素

（二）data部分代碼

data () {

return {
  selectedCategorySpe: this.selectedCategory,
  serviceForm: {
    title: "",
    desc: "",
    priority: "",
    occurDate: ""
  },
   dialogImageUrl: "",
   dialogVisible: false,
  uploadAction: "/inner/event/order/submit/submit" + "&accessToken=" + this.$store.getters.token
}

（三）computed部分代碼

computed: {

...mapGetters([
  "constConfig"
]),
paramsData: function () {
  let params = {
    eventCategory: this.selectedCategorySpe.categoryId,
      priority: this.serviceForm.priority,
      title: this.serviceForm.title,
      dsc: this.serviceForm.desc,
      occurDate: this.serviceForm.occurDate
  }
  return params
}

},
使用computed實現(xiàn)實時監(jiān)測paramsData的值，只要selectedCategorySpe.categoryId，serviceForm.priority，serviceForm.title

，serviceForm.desc，serviceForm.occurDate中只有一個變化，都會重新計算paramsData的值。

（四）methods部分方法

beforeUploadPicture(file){
  const isImage = file.type == "image/png" || file.type == "image/jpg" ||  file.type == "image/jpeg" || file.type == "image/bmp" || file.type == "image/gif" || file.type == "image/webp";
  const isLt2M = file.size <  1024 * 1024 * 2;
  if (!isImage) {
    this.$message.error("上傳只能是png,jpg,jpeg,bmp,gif,webp格式!");
  }
  if (!isLt2M) {
    this.$message.error("上傳圖片大小不能超過 2MB!");
  }
  return isImage && isLt2M;
},
handlePictureCardPreview(file) {
  this.dialogImageUrl = file.url;
  this.dialogVisible = true;
},
handleRemovePicture(file, fileList) {
  console.log(file, fileList);
},
imageChange(file, fileList, name) {
  console.log(file, fileList);
},

confirm(){

this.$refs.upload.submit();
}

說明:confirm使用ref的綁定的upload，緊接著調(diào)用form的表單的submit方法。這個vue已經(jīng)封裝好了，這時候傳的參數(shù)可以看到post傳遞的文件對象。

二、同時上傳圖片和文件，并且圖片可以看縮略圖文件顯示成列表

但是當(dāng)你出現(xiàn)這樣的需求的時候，一臉蒙蔽

（一）視圖部分代碼

確定

（2）data部分?jǐn)?shù)據(jù)

data () {
    return { 
      selectedCategorySpe: this.selectedCategory,
      serviceForm: {
        title: "",
        desc: "",
        priority: "",
        occurDate: "",
      },
      images: {},
      files: {},
      dialogImageUrl: "",
      dialogVisible: false
    }
  },

（3）method部分?jǐn)?shù)據(jù)

beforeUploadPicture(file){
     const isImage = file.type == "image/png" || file.type == "image/jpg" ||  file.type == "image/jpeg" || file.type == "image/bmp" || file.type == "image/gif" || file.type == "image/webp";
      const isLt2M = file.size <  1024 * 1024 * 2;
      if (!isImage) {
        this.$message.error("上傳只能是png,jpg,jpeg,bmp,gif,webp格式!");
      }
      if (!isLt2M) {
        this.$message.error("上傳圖片大小不能超過 2MB!");
      }
      return isImage && isLt2M;
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleRemovePicture(file, fileList) {
      console.log(file, fileList);
    },
    imageChange(file, fileList, name) {
      console.log(file, fileList);
      this.imageList = fileList;
      this.images["images"] = fileList;
    },

    handleRemoveFile(file, fileList) {
      console.log(file, fileList);
    },
    handlePreviewFile(file) {
      console.log(file);
    },
    handleExceedFile(files, fileList) {
      this.$message.warning(`當(dāng)前限制選擇 3 個文件，本次選擇了 ${files.length} 個文件，共選擇了 ${files.length + fileList.length} 個文件`);
    },
    beforeRemoveFile(file, fileList) {
      return this.$confirm(`確定移除 ${ file.name }？`);
    },
    fileChange(file,fileList) {
      console.log(file, fileList);
      this.fileList = fileList;
      this.files["files"] = fileList;
 },

  confirm(){
          let wfForm = new FormData();
          wfForm.append( "eventCategory",this.selectedCategorySpe.categoryId)
          wfForm.append( "priority",this.serviceForm.priority)
          wfForm.append( "title",this.serviceForm.title)
          wfForm.append( "dsc",this.serviceForm.desc)
          wfForm.append( "occurDate",this.serviceForm.occurDate)
          Object.entries(this.images).forEach(file => {
            file[0].forEach(item => {
              // 下面的“images”，對應(yīng)后端需要接收的name，這樣對圖片和文件做一個區(qū)分，name為images為圖片
              wfForm.append("images", item.raw)
              // wfForm.append(item.name, file[0])
            })
          })
          Object.entries(this.files).forEach(file => {
            file[0].forEach(item => {
              // 下面的“files”，對應(yīng)后端需要接收的name，name為files為文件
              wfForm.append("files", item.raw)
              //wfForm.append(item.name, file[0])
            })
          })
          createEventOrder(wfForm).then( res => {
            console.log(res, "res")
            if(res.retValue === 1){
              this.$message.success( "成功創(chuàng)建服務(wù)單" );
              this.handleClose()
            }else{

            }
          })

    }

說明一下，新建了this.files存文件列表，this.images存圖片列表。在confirm中新建一個FormData對象，使用append方法將參數(shù)變量加到數(shù)據(jù)對象中，和文件對象。最后將FormData對象傳給后端。

傳遞的參數(shù)截圖如下：

這回對images和files，圖片和文件做區(qū)分，后端也需要做個判斷，其他的參數(shù)不需要的參數(shù)可以選擇不傳，需要增加新的參數(shù)，使用append的方法添加。

2019.07.11【說明】

根據(jù)評論中提到的問題

 this.files[""] = fileList;

意義不大，這個就是想用一個對象存那個文件對象，對象需要一個name，自己取一個，也可以為空。改成這樣也行：

 this.files["files"] = fileList;

這樣做的目的是如果你的文件上傳和圖片上傳用一個this.fileImage對象的話，在最后包裝formData的時候可以通過對象的name區(qū)分，哪個是文件，哪個是圖片，用一次

Object.entries(this.images).forEach

就可以把formData包裝好，更符合前端的高復(fù)用，低代碼的思想。

我怕有人理解不了這個，我還是補充一下代碼：

（2）data部分?jǐn)?shù)據(jù)（新增一個fileImage）

fileImage: {},

（3）methods中修改這塊

1、圖片上傳的這塊修改為

if(isImage && isLt2M){  
    this.imageList = fileList;  
    this.fileImage["images"] = fileList;}else{  
    fileList.splice(-1,1);
}

2、文件上傳的這塊修改為

if(!isImage && isLt2M){  
    this.fileList = fileList;  
    this.fileImage["files"] = fileList;}else{  
    fileList.splice(-1,1);
}

3、提交那塊，把兩個forEach合并成一個，然后直接取對象的name最為formData的name。

Object.entries(this.fileImage).forEach(file => {      file[1].forEach(item => {    
        wfForm.append(file[0], item.raw)    
    })
})

最后也可以看到，也是ok的

【歡迎關(guān)注，有什么問題，歡迎提出，我看到有空就回答】

GPU云服務(wù)器云服務(wù)器 elementui 同時調(diào)用 java禁止同時調(diào)用同時使用

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/99795.html

發(fā)表評論

登陸后可評論

0條評論

lavor

男|高級講師

我要關(guān)注我要私信

TA的文章

RackNerd：雙11優(yōu)惠，促銷多款美國便宜VPS，低至$12/年，可選6個機房(洛杉磯/圣何塞/

閱讀 818·2021-10-25 09:48
Vultr機房測評 - Vultr英國倫敦London機房綜合速度和線路去程回程測試

閱讀 610·2021-08-23 09:45
CSS 雜記

閱讀 2496·2019-08-30 15:53
手機html頁面的垂直布局的基本框架

閱讀 1758·2019-08-30 12:45
2018 百度web前端面試

閱讀 585·2019-08-29 17:21
Android Studio導(dǎo)入并顯示國內(nèi)地圖SDK步驟對比以及需要注意的點（百度地圖和高德地圖為例

閱讀 3406·2019-08-27 10:56
JavaScript系列--類型判斷的4種基本方法，研究jquery的type方法，空對象的檢測方法

閱讀 2546·2019-08-26 13:48
文章5：vue（2）

閱讀 690·2019-08-26 12:24

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

【elementUI系列】使用elementUI調(diào)用一次接口同時上傳圖片和文件，同時需要攜帶其他參數(shù)

相關(guān)文章

**基于vue-elementui的圖片文件上傳的高階使用分享**

封裝框架的實踐

**基于elementUI實現(xiàn)圖片預(yù)覽組件**

聊一聊前端換膚

elementUI源碼修改的爬坑之旅

發(fā)表評論

0條評論

lavor

男|高級講師

TA的文章

RackNerd：雙11優(yōu)惠，促銷多款美國便宜VPS，低至$12/年，可選6個機房(洛杉磯/圣何塞/

Vultr機房測評 - Vultr英國倫敦London機房綜合速度和線路去程回程測試

CSS 雜記

手機html頁面的垂直布局的基本框架

2018 百度web前端面試

Android Studio導(dǎo)入并顯示國內(nèi)地圖SDK步驟對比以及需要注意的點（百度地圖和高德地圖為例

JavaScript系列--類型判斷的4種基本方法，研究jquery的type方法，空對象的檢測方法

文章5：vue（2）

最新活動