iview upload 元件

單張圖檔上傳

<template>
 <Upload
              style="margin-left:40px;margin-top:10px;"
              ref="upload"
              :before-upload="beforeImgFile"
              :on-success="successImgFile"
              :on-error="errorImgFile"
              :action="uploadFileUrl"
              :accept="Accept"
              :format="Format"
              :on-format-error="handleFormatError"
              :max-size="FileMaxSize"
              :on-exceeded-size="handleMaxSize"
              :show-upload-list="true"
              :data="uploadData"
            >
               <!-- :headers="headers" -->
             
              <Button icon="ios-cloud-upload-outline" :disabled="this.otherFileArr.length >=10">添加</Button>
            </Upload>
<template>
export default {
  data() {
	return{
	uploadFileUrl: axios.defaults.baseURL + "channelData/fileUpload",
      file: null,
      isShow: false,
      isShowTxt: "",
      Accept: "pdf,png,jpg,jpeg,doc,docx", //上傳檔案格式限制
      Format: ["pdf", "png", "jpg", "jpeg", "doc", "docx"], //上傳檔案格式限制
      FileMaxSize: 1024 * 20, // 最大Kb
      uploadData: {},
      headers: { "Content-Type": "application/x-www-form-urlencoded" }
}
}
methods: {
// 判斷上傳類型是否錯誤
    handleFormatError(file) {
      console.log(file);
      this.isShowTxt = "*隻支援jpg,png格式圖檔和pdf檔案";
      this.isShow = true;
    },
    // 判斷檔案大小
    handleMaxSize(file) {
      console.log(file);
      this.isShowTxt = "檔案不能超過2M";
      this.isShow = true;
    },
    // 圖檔上傳之前
    beforeImgFile(e) {
      let _this = this;
      console.log(e);
      this.uploadData = {
        orderId: this.id
      };
      let promise = new Promise(resolve => {
        this.$nextTick(function() {
          resolve(true);
        });
      });
      return promise;
    },
// 上傳成功
    successImgFile(e) {
      console.log(e);
      if (e.flag == 1) {
        this.getOrderDetail();
        this.$refs.upload.clearFiles();
        this.isShow = false;
      } else {
        this.isShowTxt = "上傳失敗，請從新上傳";
        this.isShow = true;
      }
    },
    // 上傳失敗
    errorImgFile(e) {
      console.log(e);
      this.isShowTxt = "上傳失敗，請從新上傳";
      this.isShow = true;
    },



}