技術標籤：通用乾貨VUE乾貨html5html

1. 看見沒有先把這個方法寫在<el-upload> 裡面。
2. 看見了嗎 這個是必填的 所以也要填上在<el-upload>裡 當然我們不用這個地址 所以寫個##### 就行了~
3. html5這樣寫（防止時間長了看不懂已經盡力註釋了。。）

<el-upload
        ref="upload"                      
        :http-request="httpRequest"
        action="########"
        :file-list="fileList"           //***上傳檔案列表非常重要！jingliang
        list-type="picture-card"        //檔案列表的型別 
        multiple                        //是否支援多選檔案     
        :limit="limitNum"               //最大允許上傳個數
        :auto-upload="false"            //是否在選取檔案後立即進行上傳
        :accept="'.pdf, .jpg, .png, .pdf, .docx, .doc, .jpg, .png , .xls ,.xlsx'"
        :before-upload="beforeUploadFile" //上傳檔案之前的鉤子
        :on-change="fileChange"         //檔案狀態改變時的鉤子，新增檔案、上傳成功和上傳失敗時都會被呼叫
        :on-exceed="exceedFile"         //檔案超出個數限制時的鉤子
        :on-success="handleSuccess"     //檔案上傳成功的鉤子
        :on-error="handleError"         //檔案上傳失敗的鉤子 
      >
        <i slot="default" class="el-icon-plus"></i>
        <div slot="file" slot-scope="{file}">
          <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
          <span class="el-upload-list__item-actions">
            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
              <i class="el-icon-zoom-in"></i>
            </span>
            <span class="el-upload-list__item-delete" @click="handleRemove(file)">
              <i class="el-icon-delete"></i>
            </span>
          </span>
        </div> 
        <div
          slot="tip"
          class="el-upload__tip"
        >只能上傳 jpg , png , pdf , docx , doc, xls , xlsx格式的檔案，且不超過10MB。</div>
      </el-upload>
      <el-button size="small" type="success" @click="submitUpload" style="margin-top:30px">上傳到伺服器</el-button>
 

4. js部分submitUpload函式就是上傳到伺服器裡了···

  data() {
    return {
      formData: "", //上傳伺服器資料
      limitNum: 20,
      fileList: [], //上傳檔案列表
      //file: [] //上傳檔案資訊
      dialogImageUrl: "", //縮圖
      dialogVisible: false, //縮圖開關
      UploadSwitch: false,
    };
  },

 // 檔案狀態改變時的鉤子
    fileChange(file, fileList) {
      this.fileList = fileList;  //這個函式***非常關鍵***
    },
    httpRequest(file) {
      //這裡啥都不用寫。。。 想不到吧
    },
    submitUpload(file) {
      for (let index in this.fileList) {
        let extension = this.fileList[index].name.substring(
          this.fileList[index].name.lastIndexOf(".") + 1
        );
        let size = this.fileList[index].size / 1024 / 1024;
        /* 驗證上傳格式  extension字尾名*/
        if ( 
          extension !== "png" &&
          extension !== "jpg" &&
          extension !== "pdf" &&
          extension !== "docx" &&
          extension !== "doc" &&
          extension !== "xlsx" &&
          extension !== "xls"
        )  {
          console.log(extension);
          this.$notify.warning({
            title: "警告",
            message: `只能上傳pdf,jpg,png,docx,doc,xlsx,xls格式的檔案`,
          });
          return;
        }
        /* 驗證上傳大小 */ 
        if (size > 10) {
          this.$notify.warning({
            title: "警告",
            message: `檔案大小不得超過10M`,
          });
          return;
        }
      }
      if (this.fileList.length === 0) {
        this.$message.warning("請選取檔案");
        return;
      }
      this.$refs.upload.submit(); //執行此步驟 相當於執行 http-request 的自定義實現方法

      this.formData = new FormData();
      //因為要傳一個檔案陣列過去，所以要迴圈append
      this.fileList.forEach((item) => {
        this.formData.append("files", item.raw);
      });
      this.formData.append("projectId", this.form.projectId);
      this.formData.append("fileType", this.fileType); 
      
        Upload(this.formData)  //Upload()是後臺介面
          .then((res) => {
            //自行處理各種情況
            
            console.log(res, "上傳成功點選上傳伺服器 下標為", this.upLoadIndex); 
            this.$emit("onChangeOpen", true);
            this.$message({
              message: "檔案上傳成功",
              type: "success",
            });
          })
          .catch(() => {
            // xxx
          });
       
    },