快捷導(dǎo)航

小程序多文件上傳 Tdesign的過(guò)程

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

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

小程序多文件上傳 Tdesign

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

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

頁(yè)面使用的是T-design

頁(yè)面更好看一點(diǎn)

且看代碼

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

Page({
  /**
   * 頁(yè)面的初始數(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失敗的問(wèn)題

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

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

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

在項(xiàng)目的JSON 文件中引入某個(gè)組件，例如：按鈕對(duì)應(yīng)的自定義組件即可
- 如果是全局導(dǎo)入直接在項(xiàng)目根目錄app.json寫入
- 如果是局部導(dǎo)入在pages某個(gè)組件的json寫入

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

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

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

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

后來(lái)發(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: