微信小程序上传

1、在相册中选择图片视频上传

        a、选择文件

  //选择图片
  chooseImage(type) {
    let that = this;
    wx.chooseMedia({
      count: 20 - that.data.genMaterialInsideList.length, // 选择的数量,这里控制了最多只能是20个
      sizeType: ["original"], // 原图还是压缩图, "compressed"
      sourceType: ["album"], // 从相册选择还是拍照
      mediaType: [type.target.dataset.type], //image	只能拍摄图片或从相册选择图片,video	只能拍摄视频或从相册选择视频, mix	可同时选择图片和视频
      success: (res) => {
        const tempFilePaths = res.tempFiles;
        tempFilePaths.map((item, index) => {
          console.log('item',item.size)
          if((Number(item.size)/1048576)>1024){
            Dialog.alert({
              message: '无法发送超过1GB的视频,请重新选择',
              confirmButtonColor:'#00CCA3'
            })
            
              return false
          }
          let genMaterialInsideList = that.data.genMaterialInsideList;
         
          genMaterialInsideList.push({ ...item});
          that.setData({ genMaterialInsideList });
        });
        that.afterRead();//图片上传方法
       
      },
      fail: (err) => {
        console.log("选择图片出错", err);
        // wx.showToast({
        //   icon: "none",
        //   title: "选择图片出错!",
        // });
      },
      complete: (event) => {
        console.log("结束选择图片", event);
      },
    });
  },

更改文件状态函数

  //改变文件上传状态
  changeFileStatus: function (showid, status) {
    const fileIndex = this.data.genMaterialInsideList.findIndex(
      (file) => file.showid === showid
    );

    if (fileIndex !== -1) {
      this.data.genMaterialInsideList[fileIndex].status = status;
      this.setData({
        genMaterialInsideList: this.data.genMaterialInsideList,
      });
    }
  },

2、文件上传,从聊天中选择

  //选择文件
  chooseFiles: function () {
    let that = this;
    wx.chooseMessageFile({
      count: 20 - that.data.genMaterialInsideList.length, // 最多可以选择的文件数量
      type: "file", // 只能选择文件类型
      extension: [
        ".xlsx",
        ".xls",
        ".XLSX",
        ".XLS",
        "xlsx",
        "xls",
        "XLSX",
        "XLS",
        "PPT",
        "Word",
        "Excel",
        "PDF",
        "TXT",
        "mp3",
        "ppt",
        ".ppt",
        ".pptx","pptx",
        ".doc",'doc','docx',
        "exexl",
        ".exexl",
        "pdf",
        ".pdf",
        "txt",
        ".txt",
        "MP3",
        ".mp3",
        ".MP3",
        ".TXT",
        ".docx",
      ],
      success: (res) => {
        const tempFiles = res.tempFiles; //选择文件
        tempFiles.map((item, index) => {
          console.log(item,'itemfile',Number(item.size)/1048576)
          if((Number(item.size)/1048576)>100){
            Dialog.alert({
              message: '只支持上传100M以内的文件',
              confirmButtonColor:'#00CCA3'
            })
            
              return false
          }
          that.data.genMaterialInsideList.push({ ...item});
          that.setData({ genMaterialInsideList: that.data.genMaterialInsideList });
        });
        this.uploadFiles();//上传
      },
      fail:(err)=>{
        console.log(err)
      }
    });
  },

----图片文件上传

  //图片上传
  afterRead() {
    let that = this;
    const genMaterialInsideList = that.data.genMaterialInsideList;
    for (const files of genMaterialInsideList) {
      if (files.status === "pedding") {
        const uploadTask = wx.uploadFile({
          url:上传接口, // 仅为示例,非真实的接口地址
          filePath: files.tempFilePath,
          name: "files",
          timeout:300000,//5分钟
          header: {
            "Content-Type": "application/json",
            Authorization: wx.getStorageSync("token")
            ? "Bearer " + wx.getStorageSync("token")
            : "",

          },
          formData: {
            param: '参数对象'
          },
          success(res) {
            // 上传完成需要更新 fileList
            // debugger;
            let data=JSON.parse(res.data)
            that.updateFileStatus(files.showid, "success");//更改文件的状态,函数在下方,如果不需要进度这个可以省略
            let fathindex = that.data.genMaterialInsideList.findIndex(
              (item) => item.showid == files.showid
            );
            that.setData({
              genMaterialInsideList: that.data.genMaterialInsideList,
            });
          },
          fail(err) {
            console.log(err, "上传图片视频错误了啊");
            // wx.showToast({
            //   icon: "none",
            //   title: err.errMsg,
            // });
            that.updateFileStatus(files.showid, "faile");
          },
          complete: () => {//更改文件状态
            const uploadTasks = that.data.uploadTasks;
            delete uploadTasks[files.showid];
            this.setData({
              uploadTasks,
            });
          },
        });
        // 监听上传进度变化事件
        // uploadTask.onProgressUpdate((res) => {
        //   let genMaterialInsideList = that.data.genMaterialInsideList;
        //   let uploadTaskindex = genMaterialInsideList.findIndex(
        //     (item) => item.showid == files.showid
        //   );
        //   if (uploadTaskindex != -1) {
        //     genMaterialInsideList[uploadTaskindex].progress = res.progress;
        //     that.setData({
        //       genMaterialInsideList,
        //     });
        //   } else {
        //     console.log("中断了啊");
        //     return;
        //   }
        //   console.log(files, "上传进度", res.progress);
        // });

        this.data.uploadTasks[files.showid] = uploadTask;
        this.setData({
          uploadTasks: this.data.uploadTasks,
        });
      }
    }
  },
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值