微信小程序使用TDesign组件中图片上传和图片删除

本篇主要是总结，图片上传。使用TDesign组件。

首先wxml文件

js文件

  // 上传图片
  handleSuccess(e) {
    let that = this
    const {
      fileList
    } = this.data;
    // console.log(e.detail.files[e.detail.files.length - 1].url)
    const {
      files
    } = e.detail;

    this.setData({
      originFiles: [...files],
    });
    // console.log('this.data.originFiles', this.data.originFiles);
    wx.uploadFile({
      url: config.baseUrl + '地址',
      filePath: e.detail.files[e.detail.files.length - 1].url,
      name: 'file',
      formData: {
        'user': 'test'
      },
      success: function (res) {
        const data = res.data
        // console.log(JSON.parse(data));
        const parsedData = JSON.parse(data).data;
        // 将 fileUrl 字段添加到 originFiles 数组的最后一个对象
        let updatedFiles = that.data.originFiles;
        updatedFiles[updatedFiles.length - 1].fileUrl = parsedData;

        // 更新 originFiles 数组
        that.setData({
          originFiles: updatedFiles
        });

      }
    })
  },
  // 图片删除
  handleRemove(e) {
    const {
      index
    } = e.detail;
    const {
      originFiles
    } = this.data;

    originFiles.splice(index, 1);
    this.setData({
      originFiles,
    });

  },

提交function中，转为json格式，并把双引号改为单引号。

   const originFiles = this.data.originFiles; // 获取原始数组
    const urls = originFiles.map(item => item.fileUrl); // 提取所有的url到新数组
    const urlsJson = JSON.stringify(urls); // 将数组转换为JSON字符串
    const urlsJsonSingleQuotes = urlsJson.replace(/"/g, "'"); // 将双引号替换为单引号
    // console.log('urlsJsonSingleQuotes',urlsJsonSingleQuotes);