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

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

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

两个js下载地址,下载

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

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

  

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
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)
           })
         }
       })
     }
   })
 }

  

 

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

  

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