微信小程序 tdesign图片上传组件 上传到服务器

简介: 微信小程序 tdesign图片上传组件 上传到服务器

最近手上的项目遇到了这个问题 也给大家分享一下

HTML部分

<t-upload mediaType="{{['video','image']}}" max="{{1}}" files="{{fileList}}" bind:add="handleAdd" bind:remove="handleRemove">
      </t-upload>

js部分

  // 上传图片
  handleAdd(e) {
    let that = this
    const {
      fileList
    } = this.data;
    console.log(e.detail.files[0].url)
    const {
      files
    } = e.detail;
    // // 方法1:选择完所有图片之后,统一上传,因此选择完就直接展示
    this.setData({
      fileList: [...fileList, ...files], // 此时设置了 fileList 之后才会展示选择的图片
    });
    wx.uploadFile({
      url: 'https://travel.kuxia.top/api/science/upload',
      filePath: e.detail.files[0].url,
      name: 'file',
      formData: {
        'user': 'test'
      },
      success: function (res) {
        const data = res.data
        console.log(JSON.parse(data));
        let a = JSON.parse(data).front_file
        that.setData({
          fabiao:a
        })
      }
    })
  },
  // 图片删除
  handleRemove(e) {
    const {
      index
    } = e.detail;
    const {
      fileList
    } = this.data;
    fileList.splice(index, 1);
    this.setData({
      fileList,
    });
  },

这里通过改动组件里的内容从而获取到图片的路径,然后提取图片路径往后端上传,就可以实现了,大家可以尝试一下

相关文章
|
18天前
|
小程序 JavaScript
【微信小程序】之轮播图、swiper、swiper-item、banner组件使用
【微信小程序】之轮播图、swiper、swiper-item、banner组件使用
【微信小程序】之轮播图、swiper、swiper-item、banner组件使用
|
18天前
|
存储 小程序 JavaScript
【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)
【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)
|
18天前
|
JSON 小程序 数据格式
【微信小程序】-- 自定义组件总结 (四十)
【微信小程序】-- 自定义组件总结 (四十)
|
18天前
|
小程序 JavaScript
【微信小程序】-- 自定义组件 - behaviors(三十九)
【微信小程序】-- 自定义组件 - behaviors(三十九)
|
18天前
|
JSON 小程序 JavaScript
【微信小程序】-- 自定义组件 - 组件所在页面的生命周期 & 插槽(三十七)
【微信小程序】-- 自定义组件 - 组件所在页面的生命周期 & 插槽(三十七)
|
18天前
|
小程序
【微信小程序】-- 自定义组件 - 纯数据字段 & 组件的生命周期(三十六)
【微信小程序】-- 自定义组件 - 纯数据字段 & 组件的生命周期(三十六)
|
18天前
|
小程序 JavaScript
【微信小程序】-- 自定义组件 - 数据监听器 (三十四)
【微信小程序】-- 自定义组件 - 数据监听器 (三十四)
|
18天前
|
存储 小程序 JavaScript
【微信小程序】-- 自定义组件 -- 数据、方法和属性(三十三)
【微信小程序】-- 自定义组件 -- 数据、方法和属性(三十三)
|
18天前
|
JSON 小程序 JavaScript
【微信小程序】-- 自定义组件 -- 创建与引用 &样式(三十二)
【微信小程序】-- 自定义组件 -- 创建与引用 &样式(三十二)
|
18天前
|
小程序
【微信小程序】-- 其它常用组件介绍 -- button & image(八)
【微信小程序】-- 其它常用组件介绍 -- button & image(八)