13、微信小程序:上传图片到服务器

1、上传图片到服务器,有两个步骤:

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

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

2、代码实现

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

<image src="{{imgPath}}" mode=""/>

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

                    }
                })
            }
        })
    },

  • 9
    点赞
  • 41
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值