收藏
回答

微信小程序商家点击上传图片没有反应,使用的是u-view的u-upload,这是为什么?

<span class=“find_title”>

  <view>

    <view class="content">

      <!-- 上传封面 -->

      <view class="want">

        <span class="find_title">上传封面</span>

        <u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" :maxCount="1"

                  uploadIcon="plus-circle-fill" uploadText="添加封面" :action="uploadUrl"></u-upload>

      </view>


      <!-- 上传分享背景 -->

      <view class="want">

        <text class="find_title">上传分享背景</text>

        <u-upload :fileList="fileList2" @afterRead="afterRead" @delete="deletePic" name="2" :maxCount="10"

                  uploadIcon="plus-circle-fill" uploadText="添加分享背景" :action="uploadUrl"></u-upload>

      </view>


      <!-- 直播描述 -->

      <view class="want">

<span class="find_title">

<u-icon name="edit-pen" class="edit-pen" size="28"></u-icon>

直播描述

</span>

        <u--textarea v-model="value" placeholder="请输入内容"></u--textarea>

      </view>


      <!-- 选择商品 -->

      <view class="want">

<span class="find_title">

</样式>

选择商品

</span>

        <u-button @click="fetchProducts">

          <u-icon name="plus-circle-fill" class="plusCir" size="24" color="#D3D4D6" />

          <text>打开</text>

        </u-button>

      </view>


      <!-- 已选商品列表 -->

      <view class="selected-products" v-if="selectedProducts.length > 0">

        <view class="product-list">

          <view class="product-item" v-for="(item, index) in selectedProducts" :key="index">

            <image :src="item.images" class="product-image"></image>

            <text class="product-title">{{ item.title }}</text>

            <u-icon name="close-circle-fill" class="delete-icon" size="20"

                    @click="removeProduct(index)"></u-icon>

          </view>

        </view>

      </view>


      <!-- 发布 -->

      <button class="yes" @click="release">

        <image src="/static/images/lives/1.png" mode=""></image>

        <p>发布</p>

      </button>

    </view>


    <!-- 模态框 -->

    <u-modal :show="show" :title="title" :content="content" :closeOnClickOverlay="true" :showCancelButton="true"

             @confirm="show = false" @cancel="show = false">

      <view v-if="products.length > 0">

        <u-button v-for="(product, index) in products" :key="index" @click="selectProduct(product)">

          {{ product.title }}

        </u-button>

      </view>

    </u-modal>

  </view>

</template>


<script>

export default {

  data() {

    return {

https://lvxiaoyunkang.lifeepay.com/index/ajax/upload

      products: [],

      selectedProducts: [],

      show: false,

      title: '选择商品',

      content: '请选择要关联的商品',

      fileList1: [],

      fileList2: [],

      value: '',

      loading: false

    };

  },

  methods: {

    async fetchProducts() {

      try {

        const [err, res] = await uni.request({

          url: `/../index/wanlshop/goods/select?sort=id&order=desc&offset=0&limit=10&filter=%7B%7D&op=%7B%7D&_=${Date.now()}`,

          method: 'GET',

          header: {

            'x-requested-with': 'XMLHttpRequest',

            'X-Custom-Header': 'wxminiapp',

          },

        });


        if (err) {

          throw new Error("请求失败");

        }


        if (Array.isArray(res.data.rows)) {

          this.products = res.data.rows;

          this.show = true;

        } else {

          throw new Error("API 返回的数据格式错误");

        }

      } catch (error) {

        console.error(error);

        uni.showToast({

          title: '获取商品列表失败',

          icon: 'none'

        });

      }

    },


    selectProduct(product) {

      if (!product || typeof product !== 'object') {

        console.error("商品数据格式错误:", product);

        return;

      }


      const exists = this.selectedProducts.some(item => item.id === product.id);

      if (!exists) {

        this.selectedProducts.push(product);

      }

      this.show = false;

    },


    removeProduct(index) {

      this.selectedProducts.splice(index, 1);

    },


    deletePic(event) {

      const listKey = `fileList${event.name}`;

      this[listKey].splice(event.index, 1);

    },


    async afterRead(event) {

      const listKey = `fileList${event.name}`;

      const lists = [].concat(event.file);


      // 显示加载中

      uni.showLoading({

        title: '上传中...'

      });


      try {

        for (let i = 0; i < lists.length; i++) {

          const item = lists[i];

          const uploadResult = await this.uploadFile(item.url);


          this[listKey].push({

            ...item,

            status: 'success',

            message: '上传成功',

            url: uploadResult.url,

            response: uploadResult

          });

        }

      } catch (error) {

        console.error('上传失败:', error);

        uni.showToast({

          title: '上传失败',

          icon: 'none'

        });

      } finally {

        uni.hideLoading();

      }

    },


    uploadFile(filePath) {

      return new Promise((resolve, reject) => {

        uni.uploadFile({

          url: this.uploadUrl,

          filePath: filePath,

          name: 'file',

          header: {

            'x-requested-with': 'XMLHttpRequest',

          },

          success: (res) => {

            if (res.statusCode === 200) {

              try {

                const data = JSON.parse(res.data);

                if (data.code === 1) {

                  resolve(data

                      .data); // 假设返回数据格式为 { code: 1, data: { url: '...' } }

                } else {

                  reject(new Error(data.msg || '上传失败'));

                }

              } catch (e) {

                reject(new Error('解析响应数据失败'));

              }

            } else {

              reject(new Error(`上传失败,状态码: ${res.statusCode}`));

            }

          },

          fail: (err) => {

            reject(err);

          }

        });

      });

    },


    async release() {

      if (!this.fileList1.length) {

        uni.showToast({

          title: '请上传封面',

          icon: 'none'

        });

        return;

      }


      if (!this.value) {

        uni.showToast({

          title: '请输入直播描述',

          icon: 'none'

        });

        return;

      }


      if (this.loading) return;

      this.loading = true;


      try {

        const [err, res] = await uni.request({

          url: '/../index/wanlshop/find/addzhibo',

          method: 'POST',

          header: {

            'x-requested-with': 'XMLHttpRequest',

            'Content-Type': 'application/json',

          },

          data: {

            content: this.value,

            goods_ids: this.selectedProducts.map(item => item.id).join(','),

            images: this.fileList1.map(item => item.url),

            share_img: this.fileList2.map(item => item.url),

            createtime: Math.floor(Date.now() / 1000),

            updatetime: Math.floor(Date.now() / 1000)

          },

        });

        if (res.res.code === 1) {

          uni.showToast({

            title: '发布成功',

            icon: 'success'

          });

          const resData = encodeURIComponent(JSON.stringify(res.data));

          setTimeout(() => {

            uni.navigateTo({

              url: `/pages/shop/plugFlow/plugFlow?resData=${resData}`

            });

          }, 1500);

        } else {

          throw new Error(res.data.msg || '发布失败');

        }

      } catch (error) {

        console.error('发布失败:', error);

        uni.showToast({

          title: error.message || '发布失败',

          icon: 'none'

        });

      } finally {

        this.loading = false;

      }

    }

  }

};

</script>


<style lang="scss">

.content {

  padding: 0 15px;

  height: 100vh;

  position: relative;


  .want {

    margin-top: 15px;

height: 108px;


    .find_title {

      font-size: 14px;

      display: flex;

      align-content: center;

      align-items: center;

    }


    .u-button {

      width: 160rpx;

      height: 160rpx;

      position: absolute;

      display: flex;

      flex-direction: column;

      background-color: #f4f5f7;

      border: 0;


      text {

        font-size: 11px;

        color: #909193;

        margin-top: 2px;

      }

    }

  }


  .yes {

    width: 100%;

    height: 100rpx;

    position: absolute;

    bottom: 0;

    right: 0;

    left: 0;

    background-color: #e74c3c;

    text-align: center;

    display: flex;

    justify-content: center;

    align-items: center;


    image {

      width: 52rpx;

      height: 52rpx;

    }


    p {

      font-size: 40rpx;

      color: #f4f5f7;

    }

  }


  .selected-products {

    margin-top: 20px;


    .find_title {

      font-size: 14px;

      display: block;

      margin-bottom: 10px;

    }


    .product-list {

      display: flex;

      flex-wrap: wrap;

      gap: 10px;


      .product-item {

        // width: calc(50% - 50px);

        background: #f8f8f8;

        border-radius: 8px;

        padding: 10px;

        box-sizing: border-box;

        position: relative;

        display: flex;


        .product-image {

          width: 100rpx;

          height: 100rpx;

          border-radius: 4px;

        }


        .product-title {

          display: block;

          font-size: 12px;

          margin-top: 5px;

          white-space: nowrap;

          overflow: hidden;

          text-overflow: ellipsis;

        }


        .delete-icon {

          position: absolute;

          top: 5px;

          right: 5px;

          color: #ff4d4f;

        }

      }

    }

  }

}

</style>

最后一次编辑于  07-05
回答关注问题邀请回答
收藏

2 个回答

  • 一笑皆春
    一笑皆春
    07-05

    后台配置用户隐私协议了么

    07-05
    有用
    回复 1
    • D
      D
      07-05
      这是一个开播的
      07-05
      回复
  • 智能回答 智能回答 本次回答由AI生成
    07-05
    有用
登录 后发表内容