在使用微信小程序开发中用vant2框架中的Uploader 文件上传wx.uploadFile无反应和使用多图上传

简介: 网上有的说是bind:after-read="afterRead"的命名问题不支持-,但是我这儿执行了console.log("file",file);证明函数运行了。后来发现是multiple="true"原因开启了多图上传,如果是多图上传的话file就是数组了

按照官方的例子我照着写了一下

<van-uploader multiple="{{true}}" file-list="{{ fileList }}" bind:after-read="afterRead" />

js代码

Page({
  data: {
    fileList: [],
  },
  afterRead(event) {
    const { file } = event.detail;
    console.log("file",file);
    // 当设置 mutiple 为 true 时, file 为数组格式,否则为对象格式
    wx.uploadFile({
      url: 'https://example.weixin.qq.com/upload', // 仅为示例,非真实的接口地址
      filePath: file.url,
      name: 'file',
      formData: { user: 'test' },
      success(res) {
        console.log("res",res);
        // 上传完成需要更新 fileList
        const { fileList = [] } = this.data;
        fileList.push({ ...file, url: res.data });
        this.setData({ fileList });
      },
    });
  },
});

image.gif

发现不执行wx.uploadFile,网上有的说是bind:after-read="afterRead"的命名问题不支持-,但是我这儿执行了console.log("file",file);证明函数运行了。后来发现是multiple="true"原因开启了多图上传,如果是多图上传的话file就是数组了

js代码需要改为

afterRead(event) {
    const { file } = event.detail;
    file.forEach(item=>{
      this.uploadImages(item);
    })
  },
  uploadImages(file){
    let that = this;
    let host = app.globalData.siteroot;
    
    const {fileList,title} = that.data;
    if(!title){
      wx.showToast({
        title: "请先填写名称",
        icon:'error',
        duration: 2000
      })
      return true
      return false;
    }
    wx.uploadFile({
      url: host+'upload/index', 
      filePath: file.url,
      name: 'images',
      formData: { title },
      success(res) {
        const data = JSON.parse(res.data)
        // 上传完成需要更新 fileList
        
        fileList.push({ ...file, url: data.data.location });
        that.setData({ fileList });
      },
    });
  },

image.gif

这样就可以实现多图上传功能了。特此记录一下

目录
相关文章
|
16小时前
|
小程序 API 数据安全/隐私保护
微信小程序开发中的一些常用标签
这些标签是微信小程序开发中的基础,开发者可以根据需要组合使用这些标签来构建小程序的界面。每个标签都有其属性和事件,可以通过属性来调整组件的样式和行为,通过事件来响应用户的操作。
12 5
|
1天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp微信小程序的多媒体素材库的开发与应用的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的多媒体素材库的开发与应用的详细设计和实现
|
1天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp微信小程序的资源共享平台的共享与开发的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的资源共享平台的共享与开发的详细设计和实现
|
1天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp微信小程序的欢迪迈手机商城设计与开发的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的欢迪迈手机商城设计与开发的详细设计和实现
|
10天前
|
小程序 应用服务中间件 Linux
【Nginx】微信小程序后端开发、一个域名访问多个服务
【Nginx】微信小程序后端开发、一个域名访问多个服务
22 0
|
10天前
|
Web App开发 数据采集 移动开发
开发uniapp过程中对app、微信小程序与h5的webview调试
开发uniapp过程中对app、微信小程序与h5的webview调试
19 1
|
10天前
|
小程序 前端开发 JavaScript
轻松学会微信小程序开发(一)
轻松学会微信小程序开发(一)
|
10天前
|
JSON 小程序 JavaScript
微信小程序开发1
微信小程序开发1
|
10天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
10天前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中PWA技术的应用,PWA结合Web的开放性和原生应用的性能,提供离线访问、后台运行、桌面图标和原生体验。开发者可利用Service Worker实现离线访问,Worker处理后台运行,Web App Manifest添加桌面图标,CSS和JavaScript提升原生体验。实践中需注意兼容性、性能优化和用户体验。PWA技术能提升小程序的性能和用户体验,助力开发者打造优质小程序。

热门文章

最新文章