微信小程序upload多张图片同时上传

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
//上传图片,选择图片
    chooseImage: function(e) {
      var that = this;
      wx.chooseImage({
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
        success: function(res) {
          const tempFilePaths = res.tempFilePaths;
          // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
          // that.files = that.files.concat(res.tempFilePaths);
          wx.showLoading({
            title: '正在上传...',
            icon: 'loading',
            // mask: true,
            duration: 10000
          });
          //循环实现多张图片一起上传
          for (var i = 0; i < tempFilePaths.length;i++){
            var filePath = tempFilePaths[i];
            wx.uploadFile({
            //这里把图片上传地址写上真实的
               url: 'https://localhost:1234/api/WorkOrder/UploadFiles',
              filePath: filePath,
              name: 'files',
              header: {
                'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
                Authorization: store.state.token || ''
              },
              //上传图片所需参数写在这里
              formData: {
                token: that.token,
                dealerid: 123,
              },
              success(res) {
              //上传成功后,返回的线上图片地址渲染图片列表
                const data = JSON.parse(res.data);
                that.files = that.files.concat(data.data);
                console.log(data,that.files,that.files.length,'data------------------');
              },
              complete:()=>{
                wx.hideLoading()
              }
            });
          }
        }
      });
    },

  

posted @   谢凌  阅读(635)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
· 面试官:你是如何进行SQL调优的?
点击右上角即可分享
微信分享提示