小程序图片传到1688怎么弄

你可以尝试使用1688的图片上传接口来实现上传图片的功能。具体的步骤如下：

1. 首先在小程序中获取图片的base64编码；

2. 使用1688的图片上传接口，铅举将base64编码的图片上传到团激肢1688；

3. 上传成功之后，获取图片塌世的地址，即可将图片传到1688。

1.注册网站相关账号，拿到 API_Key ， Secret_Key

2.获取token

想授权地址 https://aip.baidubce.com/oauth/2.0/token 发送请求（推荐post），并在 url 中带上相关参数

-grant_type： 必须参数，固定为client_credentials；

-client_id： 必须参数，应用的API_Key；

_client_secret： 必须参数，应用的Secret_Key；

3.token的保存

在获取的token之后我们可以用uni.setStorage方法（原生的方法不太一样，不过原来都是一样的）把获取到的token和有效时间宴旦加上当前时间的值存储到本地，这样不用每次进入小程序就不用反复的请求token；

具体怎么做：念并

4.设置图片来源选择

用uni.showActionSheet()来配置图片来源的选择

5.根据图片识别接口需要，图片转base64

6.请求图像识别api

注仔祥迹意： token要放到URL中 ，请求方式为 post ；header中Content-Type设置为 application/x-www-form-urlencoded

有时候会遇到后端需要前端获取的图片文件转换成base64，在传给后台

小程序有巧举专门的选择图片接口，

wx.chooseImage(OBJECT)

但是这个只是返回一个图片的临时路径，并不是文件数据本身。

小程序暂时没有接口直接转base64的

所以我们需要使用canvas和canvasGetImageData（小程序版本1.9.0以后要才有）先获取图片内容，

再通过插件upng.js插件实现图片转base64（所需插件文件附件中）

1. 把upng.js和pako.min.js文件放到项目中

2. 在pages下的页面js文件中导入

var upng = require('../../utils/upng.js')

这里只需要导入npng.js ，pako.min.js是在npng,js里面调用

3. 建一个canvas

chooseImage">人脸测试  

// 画布

// 生成base64位图片展示 变量imgbase64

need-to-insert-img

4. 添加js点击chooseImage事件

chooseImage: function() {

        var that = this

        var coss_signature = wx.getStorageSync('cos_signature')

        var canvasID = "imgCanvas"

        var canvas = wx.createCanvasContext(canvasID)

        wx.chooseImage({

            sourceType: ['album', 'camera'],

            sizeType: ['original'],

            count: 1,

            success: function (res) {

                var tempFilePaths = res.tempFilePaths

                // 获取文件路径

                var filePath = tempFilePaths[0]

                // 1. 绘制图片至canvas

                canvas.drawImage(filePath, 0, 0, 300, 200)

                // 绘制完成后执行回调，API 1.7.0

                canvas.draw(false, function(res){

                    // 2. 获取图像数据， API 1.9.0

                    wx.canvasGetImageData({

                        canvasId: canvasID,

                        x: 0,

                        y: 0,

                        width: 300,

                        height: 200,

                        success(res) {

                          // 3. png编码

                          let pngData = upng.encode([res.data.buffer], res.width, res.height)

                          /孝饥碧/ 4. base64编码

                          let base64 = wx.arrayBufferToBase64(pngData)

             肢液             // ...

                          that.setData({

                            imgbase64: base64

                          })

                        }

                    })

                })

            }

        })

    }

5. 实现

need-to-insert-img

need-to-insert-img

tips

画布画的图片的长和宽是固定的，这个按照自己需求设置。

可以通过小程序的

wx.getImageInfo(OBJECT)

获取长和宽

相关链接

upng.js:  https://github.com/photopea/UPNG.js

wx-cardscanner:  https://github.com/zh8637688/wx-cardscanner 有时候会遇到后端需要前端获取的图片文件转换成base64，在传给后台

小程序有专门的选择图片接口，

但是这个只是返回一个图片的临时路径，并不是文件数据本身。

小程序暂时没有接口直接转base64的

所以我们需要使用canvas和canvasGetImageData（小程序版本1.9.0以后要才有）先获取图片内容，

再通过插件upng.js插件实现图片转base64（所需插件文件附件中）

1. 把upng.js和pako.min.js文件放到项目中

2. 在pages下的页面js文件中导入

var upng = require('../../utils/upng.js')

这里只需要导入npng.js ，pako.min.js是在npng,js里面调用

3. 建一个canvas

chooseImage">人脸测试  

// 画布

// 生成base64位图片展示 变量imgbase64

4. 添加js点击chooseImage事件

chooseImage: function() {

        var that = this

        var coss_signature = wx.getStorageSync('cos_signature')

        var canvasID = "imgCanvas"

        var canvas = wx.createCanvasContext(canvasID)

        wx.chooseImage({

            sourceType: ['album', 'camera'],

            sizeType: ['original'],

            count: 1,

            success: function (res) {

                var tempFilePaths = res.tempFilePaths

                // 获取文件路径

                var filePath = tempFilePaths[0]

                // 1. 绘制图片至canvas

                canvas.drawImage(filePath, 0, 0, 300, 200)

                // 绘制完成后执行回调，API 1.7.0

                canvas.draw(false, function(res){

                    // 2. 获取图像数据， API 1.9.0

                    wx.canvasGetImageData({

                        canvasId: canvasID,

                        x: 0,

                        y: 0,

                        width: 300,

                        height: 200,

                        success(res) {

                          // 3. png编码

                          let pngData = upng.encode([res.data.buffer], res.width, res.height)

                          // 4. base64编码

                          let base64 = wx.arrayBufferToBase64(pngData)

                          // ...

                          that.setData({

                            imgbase64: base64

                          })

                        }

                    })

                })

            }

        })

    }

5. 实现

tips

画布画的图片的长和宽是固定的，这个按照自己需求设置。

可以通过小程序的

获取长和宽

相关链接

upng.js:  https://github.com/photopea/UPNG.js

wx-cardscanner:  https://github.com/zh8637688/wx-cardscanner

---