cube-ui組件upload在form中使用的動態action解決方案

直接上代碼

<cube-form-item :field="fields[2]" class="cube-form-none-border">
  <div class="upload-box">
    <p>上傳營業執照照片</p>
    <cube-upload
      ref="businessLicenseUrl"
      v-model="model.businessLicenseUrl"
      :action="businessLicenseAction"
      @files-added="addedHandler('businessLicenseUrl')"
      @file-error="errHandler"
    >
      <div class="clear-fix">
        <cube-upload-file
          v-for="(file, i) in model.businessLicenseUrl"
          :file="file"
          :key="i"
        ></cube-upload-file>

        <cube-upload-btn :multiple="false">
          <div>
            <i></i>
            <p>上傳營業執照照片</p>
          </div>
        </cube-upload-btn>
      </div>
    </cube-upload>
  </div>
</cube-form-item>

JS：

  data() {
    return {
      action: "http://xuan.zhaoshang800.com/place/appointment/upload",
      hasData: true,
      title: "在線預約",
      uploadSuc: false,
      isIPhoneX: Global.config.isIPhoneX(),
      isIOS: !!Global.config.ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
      showCustomTitle: true,
      toastText: "",
      showToast: false,
      validity: {},
      valid: undefined,
      organizationCode: "",
      businessLicenseAction: {
        target: () => {
          return this.action + "?type=3&code=" + this.model.organizationCode;
        },
        checkSuccess: (res, file) => {
          console.log("res", res);
          if (res.code == 179) {
            this.createToastFun();
          } else if (res.code == 200) {
            return true;
          }
        }
      },
       fields: [
        fields.input(
          "entName",
          { placeholder: "企業名稱", maxlength: 50 },
          /^[a-zA-Z\u4e00-\u9fa5]+$/
        ),
        fields.input(
          "organizationCode",
          { placeholder: "統一社會信用代碼", maxlength: 18 },
          creditReg
        ),
        {
          type: "upload",
          modelKey: "businessLicenseUrl",
          props: {
            multiple: false,
            max: 1
          },
          events: {
            "file-removed": (...args) => {
              console.log("file removed", args);
            }
          },
          rules: {
            required: true,
            uploaded: (val, config) => {
              return Promise.all(
                val.length &&
                  val.map((file, i) => {
                    return new Promise((resolve, reject) => {
                      if (file.uploadedUrl) {
                        return resolve(val);
                      }
                      // fake request
                      setTimeout(() => {
                        if (i % 2) {
                          reject(new Error());
                        } else {
                          file.uploadedUrl = "uploaded/url";
                          resolve(val);
                        }
                      }, 1500);
                    });
                  })
              ).then(res => {
                return true;
              });
            }
          },
          messages: {
            uploaded: "上傳失敗"
          }
        },
      ]
    }