13、微信小程序：上传图片到服务器-Toy模板网

这篇具有很好参考价值的文章主要介绍了13、微信小程序：上传图片到服务器。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

微信小程序怎么上传到服务器,微信小程序

1、上传图片到服务器，有两个步骤：

1.1 拿到可上传的图片 wx.chooseImage

1.2 将图片上传到服务器 wx.uploadFile

2、代码实现

<button bindtap="upload">点击上传</button>

<image src="{{imgPath}}" mode=""/>文章来源地址https://www.toymoban.com/news/detail-520050.html

 upload(){
        var _this=this
        wx.chooseImage({
            拿几张图片 count
            图片上传类型  sizeType
            图片来源   sourceType
            success(res){//获取成功  

            wx.uploadFile({
                临时图片路径 filePath
                服务器地址   url
                name
                timeout
                success(res){
                    let imgPath=baseUrl+JSON.parse(res2.data).data
                    _this.setData({
                        imgPath
                    })
                }
            })
            }     
        })
 }

// 上传图片到服务器
    upload() {
        var _this=this
        wx.chooseImage({
            count: 1,   //可上传的图片数量
            sizeType: ['original', 'compressed'],//上传图片类型：原图、压缩图
            sourceType: ['album', 'camera'], //图片来源：相册、照相机
            success(res) {
                // 成功，将图片上传到服务器
                console.log(res);
                // 拿取临时路径文件
                let filePath = res.tempFilePaths[0]
                /*  
                 控制台的 tempFilePaths: ["http://tmp/DTalF29Fe4wkc6221b571e512fe6b7a68b2926e81b51.jpg"]
                  即表示图片的临时路径
               */
                wx.uploadFile({
                    /* // 拿到临时图片路径后上传到服务器，服务器将返回一个公网地址，
                    届时在任意角落都将能访问到这张图片 */
                    filePath: filePath, //临时文件路径
                    url: baseUrl + "/api/test/user/upload",  //填写公司的服务器地址
                    name: 'file',   /* //非常重要！！！！是后台访问二进制数据的关键 
                    该 file 是对应接口，所需要传递的参数 */
                    timeout:5000,
                    success(res2){
                        console.log(res2);
                        // 需解析信息，拿到图片路径，因为本项目的 域名以 .com 结尾，所以需要“ / ”进行必要分隔
                        let imgPath=baseUrl+"/"+JSON.parse(res2.data).data //将二进制转换成字符串类型
                        _this.setData({
                            imgPath
                        })

                    }
                })
            }
        })
    },

到了这里，关于13、微信小程序：上传图片到服务器的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！