小程序多文件上傳 Tdesign的過程

更新時間：2023年11月22日 10:58:06 作者：xuxiaoxie

眾所周知,小程序文件上傳還是有點麻煩的,其實主要還是小程序?qū)Φ慕涌谟兄T多的不便,比如說,文件不能批量提交,只能一個個的提交,小程序的上傳需要專門的接口,現(xiàn)在給大家分享小程序多文件上傳 Tdesign的方法,感興趣的朋友一起看看吧

小程序多文件上傳 Tdesign

眾所周知，小程序文件上傳還是有點麻煩的，其實主要還是小程序?qū)Φ慕涌谟兄T多的不便，比如說，文件不能批量提交，只能一個個的提交，小程序的上傳需要專門的接口。
普通的小程序的頁面也比普通的HTML復雜很多

現(xiàn)在的我就對這個做一個記錄：

頁面使用的是T-design

頁面更好看一點

且看代碼

<t-upload
    media-type="{{['video','image']}}"
    files="{{originFiles}}"
    gridConfig="{{gridConfig}}"
    bind:success="handleSuccess"
    bind:remove="handleRemove"
    bind:click="handleClick"
  />

Page({
  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    originFiles: [],
    gridConfig: {
      column: 4,
      width: 160,
      height: 160,
    },
    config: {
      count: 1,
    },
  },
handleSuccess(e) {
    const { files } = e.detail;
    let that=this;
    files.forEach(item=>{
      request.upload("api/wxapp/upload",item).then(res=>{
          let resp = JSON.parse(res);
          //res返回的地址需要有{"url":"http://xxx"},這樣的話回填也比較容易，不然的話，需要轉(zhuǎn)換
            this.setData({
              originFiles: [...that.data.originFiles,resp.data],
         });
      });
    })
  },
  handleRemove(e) {
    const { index } = e.detail;
    const { originFiles } = this.data;
    //刪除
    originFiles.splice(index, 1);
    this.setData({
      originFiles,
    });
  },
  handleClick(e) {
    console.log(e.detail.file);
  },
  })

微信小程序?qū)隩Design失敗的問題

最近騰訊出了一個TDesign的企業(yè)級框架，剛好在開發(fā)小程序想要使用下這個框架，于是打開官網(wǎng)，按照官網(wǎng)的操作卻發(fā)現(xiàn)了問題
附上官網(wǎng)鏈接 TDesign官網(wǎng)
官網(wǎng)操作步驟
在項目根目錄下面使用npm安裝依賴，執(zhí)行npm i tdesign-miniprogram -S --production

需要在微信開發(fā)者工具中對 npm 進行構(gòu)建：工具 - 構(gòu)建 npm

將 app.json 中的 "style": "v2" 移除。

在項目的JSON 文件中引入某個組件，例如：按鈕對應的自定義組件即可
- 如果是全局導入直接在項目根目錄app.json寫入
- 如果是局部導入在pages某個組件的json寫入

  "usingComponents": {
    "t-button": "tdesign-miniprogram/button/button"
  }

接著就可以在 wxml 中直接使用組件

  <t-button type="primary">按鈕</t-button>

按照以上的操作流程按道理就可以使用了，但是再進行到第二步的時候出現(xiàn)問題了，在構(gòu)建的時候一直提示如下，導致一直構(gòu)建不成功，也一直無法使用。

后來發(fā)現(xiàn)只要在根目錄的project.config.json里面添加如下配置,再執(zhí)行構(gòu)建就可以了。

 "setting": {
      "packNpmManually": true,
      "packNpmRelationList": [
        {
          "packageJsonPath": "./package.json",
          "miniprogramNpmDistDir": "./miniprogram"
        }
      ]
    },

到此這篇關(guān)于小程序多文件上傳 Tdesign的文章就介紹到這了,更多相關(guān)小程序多文件上傳 Tdesign內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: