vant上傳文件到后端

最近在做手機版頁面，采用的vant框架，這個上傳控件和以前用iview、element有點不一樣，iview、element都是直接提供后端接口文件會自動發送到后端，vant需要自己負責發送文件到后端，對於我這種面向百度編程人員還是有點難度。特意記一下，能幫到其他面向百度編程人員

---

代碼

很簡單，基本是使用文件構建FormData參數，如下：

html代碼

<van-uploader
:after-read="afterRead"
:before-delete="beforeDelete"
v-model="fileList"
/>

ts代碼

  fileList=[];
  /**文件上傳 */
  afterRead(file) {
    // 此時可以自行將文件上傳至服務器
    // console.log(file);
    let that = this;
    let id = 1;
    if (!/image\/[a-zA-z]+/.test(file.file.type)) {
      this.$toast("請上傳圖片");
      return false;
    }

    let params = new FormData();
    params.append("file", file.file);
    params.append("ID", id);
    let config = {
      headers: {
        //添加請求頭
        "Content-Type": "multipart/form-data"
      }
    };
    return new Promise((resolve, reject) => {
        //我的后端還是asp的
        //需要其他后端的可以看我以前的博文去復制
      Ajax.post("/***/FileUpload.ashx", params, config)
        .then(res => {
          if (res.status === 200) {
            //可以直接再file上附加屬性，這樣再刪除的時候就可以作為標識從服務器刪除數據
            file.path = res.data[0].Path;
            //URL是一個后端地址（前后端不在一個地址）常量
            file.url = URL + res.data[0].Path;
            console.log(that.fileList);
            resolve();
          } else reject();
        })
        .catch(() => {
          reject();
        });
    });
  }
  beforeDelete(file) {
    console.log(file);
    return new Promise((resolve, reject) => {
        //我的后端刪除文件直接使用文件地址，你們的根據自己的修改
      Ajax.post(
        "/***/DeleteFile.ashx?path=" +
          escape(file.path) +
          "&ts=" +
          new Date().getTime()
      )
        .then(res => {
          if (res.status === 200) resolve();
          else reject();
        })
        .catch(() => {
          reject();
        });
    });
  }

這里沒有寫從后端獲取文件列表，你需要自己獲取，文件列表只需要包含url或者content（文件的base64編碼）兩個屬性就可以正常綁定列表，上傳的時候通常是content，從服務器返回的我用的url，主要是讀取文件再轉換base64我不會，還要再百度一次，太麻煩了。

---