微信小程序上传图片方法2,使用formdata

主要是使用到formdata方式,但微信小程序并不支持,使用此插件

https://github.com/zlyboy/wx-formdata

两个js下载地址,下载

下面代码是先压缩再上传,同时也适用改造一次性多文件上传

const FormData = require('../../../lib/formData.js')

  

 chooseImage() { 
    wx.chooseMedia({
      mediaType: ['image'],
      sourceType: ['album', 'camera'],
      success(res) { 
        const tempFiles = res.tempFiles;
        //单个图片
        var imagePath = tempFiles[0].tempFilePath;
        wx.compressImage({
          src: imagePath,  
          quality: 80, //质量
          compressedWidth:1024,//最大宽度
          success:function(compRes){
             
            let formData = new FormData();
            formData.append("maxWidth", "1024");//服务端再裁剪
            formData.append("thumWidth", "100");//缩略图
            formData.append("savedirectory", "avatar");//保存在uploadfiles的文件夹名

            formData.appendFile("file", compRes.tempFilePath);
    
            let data = formData.getData();
            //下面是调用后端接口上传
            api.upload(data.buffer,data.contentType).then(function (uploadRes) {
              //{success: true, msg: null, imageUrl: "/uploadfiles/sign/99_995de918a4104fd6b310d7cd90b2baff.jpg"}
              console.log("上传结果", uploadRes) 
            })
          }
        }) 
      }
    })
  }

  

 

//使用flyio插件调用招商口并上传 
upload: (data, contentType) => fly.post('/WebApi/upload/UploadImage', data, {
    baseURL: getHostUrl(),
    headers: { 'Content-Type': contentType }
  })

  

posted @ 2022-10-04 14:02  evemen  阅读(1909)  评论(0)    收藏  举报