1.选择图片

若不了解小程序图片选择,请先阅读wx.chooseImage(Object object)

wx.chooseImage(Object object)
从本地相册选择图片或使用相机拍照。

先来看下各项参数介绍

wx.chooseImage({
  count: 1,//选择图片个数1-9
  sizeType: ['original', 'compressed'],//original原图,compressed压缩图
  sourceType: ['album', 'camera'],//album从相册选图,camera使用相机
  success (res) {
      // tempFilePath可以作为img标签的src属性显示图片
      const tempFilePaths = res.tempFilePaths
  }
})

count:选择图片个数1-9

sizeType: ['original', 'compressed'],//original原图,compressed压缩图

sourceType: ['album', 'camera'],//album从相册选图,camera使用相机

接口调用成功的回调函数会返回Object res

我们直接打印出来接口调用成功返回值,看看都返回了什么幺蛾子

接口调用成功返回

errMsg:结果

tempFilePaths: 图片的本地临时文件路径列表,临时文件路径可以作为img标签的src属性显示图片

tempFiles:图片的本地临时文件列表,包含图片本地临时文件路径path,和本地临时文件大小size，单位 B

图片路径已经拿到了

2.图片上传

就决定是你了wx.uploadFile(Object object)

wx.uploadFile(Object object)本地资源上传到开发者服务器，客户端发起一个 HTTPS POST 请求，其中 content-type 为 multipart/form-data。

        wx.uploadFile({
            url: '',//开发者服务器地址
            filePath: '',//要上传文件资源的路径
            name: '',//文件对应的 key，开发者在服务端可以通过这个 key 获取文件的二进制内容
            header: {
                    "Content-Type": "multipart/form-data"
            },
            //传参
            formData:{ 
            },
            success: function (res) {
               console.log(res)
            },
        })

url: '',//开发者服务器地址

filePath: '',//要上传文件资源的路径,上面tempFilePaths中获取到的图片临时路径

name: '',//文件对应的 key，开发者在服务端可以通过这个 key 获取文件的二进制内容

formData:HTTP 请求中其他额外的 form data-----可以理解为传参(适用于比如修改用户个人信息,在修改头像和昵称后,头像路径放入filePath,新昵称就可以通过formData传参进行保存)

好了,写到这里，我们就完成了整个图片上传案例。你动手了吗？