近期微信小程序开发总结（3）：上传文件wx.uploadfile(特指上传一个）

科技前沿 • 2025-01-11 17:42 • 阅读 39

大家好，我是讯享网，很高兴认识大家。

最近开发微信小程序的过程中遇到了上传文件的一系列问题，包括文件上传到服务器不成功，不会一次性上传多个文件等问题（本文均以图片作为文件，下文的图片均可替代为文件）。

1、我们要先用wx.chooseImage这个接口去调用我们的手机拍摄功能或者进入手机相册选取需要上传的照片；
里面的count：1表示仅限选择一张照片，tempFilePaths是图片路径的数组（因为我们这里只选了一张图片，所以路径数组中的路径也只有一个）；
在这里插入图片描述
讯享网
2、选择好了照片之后就是调用wx.uploadfile接口将我们的图片上传到服务器了；
下图是调用wx.uploadfile接口的代码，url就是后端给的接口文档中要上传文件的那个接口；filePath就是我们要上传文件的临时路径（此处就是上面用wx.chooseImage选择图片获取到的图片临时路径）；
header注意一下跟一般的请求头里面的都是不同的；name就是接口文档里相应的字段名；formData就是这一次上传过程中除了文件外其他的文本内容可以放在这里面跟图片一起上传（比如我们反馈信息，发布动态需要让图片跟文字内容一起上传就用得上。但是这边文章讲述的仅仅是一次性上传一张，不能够一次性多张图片跟文本内容同时上传，如有多图片同时上传的需求可移步这里：一次性多图片上传
在这里插入图片描述

//从本地选择图片 choosealbum:function() { 
    wx.chooseImage({ 
    count: 1,//数量为一张 sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success: (res)=> { 
    var tempFilePaths = res.tempFilePaths this.setData({ 
   tempfilepath:tempFilePaths})//tempFilePaths为一个数组，显示数组第一个元素 //setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。 } }) }, //一个点击事件，在页面中点击之后执行 send:function(e){ 
    var that=this; wx.showLoading({ 
    title:'发送中', }) setTimeout(function(){ 
    wx.hideLoading() },1000) that.upLoadImage();//调用上传图片的函数 }, //上传图片的函数 upLoadImage(){ 
    var that=this; wx.uploadFile({ 
   //调用微信里面上传文件的开放接口 url: host+userFeedbackUrl+app.globalData.userId,//上传到服务器的接口 filePath:that.data.tempfilepath,//文件的路径，只能有一个，不支持数组等一次性包含多个文件路径的形式 header: { 
    "Content-Type": "multipart/form-data" }, name: 'screenshot',//接口文档中给该文件的字段名 formData:{ 
    information:that.data.detail, },//这里面写除了文件外的其他参数 success: (result) => { 
    var resObject=result.data; if(result.statusCode==200){ 
    wx.showToast({ 
    title: '发送成功', }) wx.switchTab({ 
    url: '../../pages/user/user', }) }else{ 
    wx.showToast({ 
    title: '发送失败', icon:'error' }) } }, fail:function(){ 
    console.log("为什么？"); wx.showToast({ 
    title: '发送成功', icon:'error' }) wx.navigateBack({ 
    delta: 1, }) } }) },

讯享网

近期微信小程序开发总结（3）：上传文件wx.uploadfile(特指上传一个）

相关推荐