快捷導(dǎo)航

微信小程序多文件上傳 Tdesign及導(dǎo)入失敗問題

更新時(shí)間：2023年11月13日 09:47:20 作者：xuxiaoxie

小程序文件上傳還是有點(diǎn)麻煩的,其實(shí)主要還是小程序?qū)Φ慕涌谟兄T多的不便,比如說,文件不能批量提交,只能一個(gè)個(gè)的提交,小程序的上傳需要專門的接口,這篇文章主要介紹了微信小程序多文件上傳 Tdesign及導(dǎo)入失敗問題,需要的朋友可以參考下

小程序多文件上傳 Tdesign

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

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

頁面使用的是T-design

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

且看代碼

<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失敗的問題

導(dǎo)入TDesign失敗的問題

最近騰訊出了一個(gè)TDesign的企業(yè)級(jí)框架，剛好在開發(fā)小程序想要使用下這個(gè)框架，于是打開官網(wǎng)，按照官網(wǎng)的操作卻發(fā)現(xiàn)了問題
附上官網(wǎng)鏈接 TDesign官網(wǎng)

官網(wǎng)操作步驟

在項(xiàng)目根目錄下面使用npm安裝依賴，執(zhí)行npm i tdesign-miniprogram -S --production

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

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

在項(xiàng)目的JSON 文件中引入某個(gè)組件，例如：按鈕對(duì)應(yīng)的自定義組件即可

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

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

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

如果是全局導(dǎo)入直接在項(xiàng)目根目錄app.json寫入
如果是局部導(dǎo)入在pages某個(gè)組件的json寫入
按照以上的操作流程按道理就可以使用了，但是再進(jìn)行到第二步的時(shí)候出現(xiàn)問題了，在構(gòu)建的時(shí)候一直提示如下，導(dǎo)致一直構(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: