微信小程序wx.chooseImage选择图片并上传避坑/真机上传无效

微信小程序选择本地图片或者相机拍照并上传服务器需要用到以下两个方法：

chooseImg() {const that = this;wx.chooseImage({count: 6,sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success (res) {// tempFilePath可以作为img标签的src属性显示图片const tempFilePaths = res.tempFilePathsfor (let i = 0; i < tempFilePaths.length; i += 1) {wx.uploadFile({url: 'https://example.weixin.qq.com/upload', //仅为示例，非真实的接口地址filePath: tempFilePaths[i],name: 'file',header: {  // 我的 HTTP 请求中需要token，视情况而定是否需要headertoken: wx.getStorageSync('token') || '',},formData: { // HTTP 请求中其他额外的 form datafile: tempFilePaths[i],},success (res){console.log(res);// 上传成功后相关操作},fail() {wx.showToast({title: '上传失败，请重试', //弹框内容icon: 'fail',  //弹框模式duration: 2000    //弹框显示时间})  },})}},})},

避坑：
在项目转测后，发现选择图片之后不显示，但是使用调式模式时，就能显示，后来发现是使用uploadFile方法前，需要在小程序后台配置uploadFile的合法域名，配完后即可正常选择图片上传

微信小程序wx.chooseImage选择图片并上传避坑/真机上传无效相关推荐

微信小程序拍照视频上传php,微信小程序-拍照或选择图片并上传文件
微信小程序-拍照或选择图片并上传文件调用拍照API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html?t=201612 ...
微信小程序调用相机选择图片生成水印
项目近期有一个需求,是在小程序使用相机拍照时,页面缩略图和上传服务器(或保存本地)的都是带水印的,水印文案是当前的时间和当前所处的地点. 前期使用了微信小程序的wx.chooseImage相机拍照,再 ...
微信小程序wx.downloadFile下载图片（甄姬）出现格式.unknown的bug
微信小程序调用api wx.downloadFile下载图片(甄姬),有时候会出现格式.unknown的bug 针对这个问题我们可以通过自定义图片名称,并且传入filePath指定文件下载后存储的路径 ...
微信小程序 — 打开相册选择图片功能
点击页面的相册按钮如何打开系统相册.选择图片: <text class="nav-item1" bindtap="navToalbum">相册< ...
imagepreview使用案例_微信小程序wx.previewImage预览图片实例详解
一.小知识二.例子 1.wxml 2.wxss .container { box-sizing:border-box; padding:20px; } .previewimg{ float:left ...
微信小程序-从相册获取图片,视频使用相机拍照,录像上传+服务器(nodejs版)接收
在本文微信小程序-从相册获取图片使用相机拍照本地图片上传之前需要看看微信小程序-获取用户session_key,openid,unionid - 后端为nodejs 代码封装是在上文添加的. ...
微信小程录制视频上传服务器,微信小程序-从相册获取图片,视频使用相机拍照,录像上传+服务器nodejs版接收-微信小程序视频上传功能-微信小程序视频上传...
在本文微信小程序-从相册获取图片使用相机拍照本地图片上传之前需要看看微信小程序-获取用户session_key,openid,unionid-后端为nodejs代码封装是在上文添加的.本文知识点:1. ...
[微信小程序]聊天对话(文本,图片)的功能(完整代码附效果图)
相关文章: 1.小程序聊天群,发送语音,文字,图片. 2.微信小程序集成腾讯IM,实现实时音视频通话,1V1聊天 3.云开发微信小程序聊天群 4.接入网易云信IM即时通讯的微信小程序聊天室 5.微信小 ...
微信小程序wx.compressImage的坑
微信小程序wx.compressImage的坑如何使用第二个坑如何使用微信小程序api官网写的是这个 wx.compressImage({ src: '', // 图片路径 quality: ...
微信小程序实现城市选择效果(超详细)
直接进入正题首先在项目中同级创建一个components文件夹,在文件夹下创建region-picker文件夹,在该文件夹点击右键新建Component就会创建名为 region-picker.js ...

微信小程序wx.chooseImage选择图片并上传避坑/真机上传无效

1.wx.chooseImage(Object object)

2.wx.uploadFile(Object object)

微信小程序wx.chooseImage选择图片并上传避坑/真机上传无效相关推荐

最新文章

热门文章