【微信小程序】—— 使用wx.uploadFile上传图片以后setData但图片不更新

最新推荐文章于 2024-07-12 10:43:36 发布
最新推荐文章于 2024-07-12 10:43:36 发布
阅读量4.8k 收藏 2
点赞数 5
分类专栏： 微信小程序 文章标签： 微信小程序 上传图片 setData JSON
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LimonSea/article/details/81775242
版权
本文探讨了在微信小程序中使用wx.uploadFile上传图片后，如何处理服务器返回的非JSON数据，并解决因图片路径不变导致setData不更新图片的问题。关键在于使用JSON.parse转换数据及在图片URL后附加时间戳确保每次请求的唯一性。
摘要由CSDN通过智能技术生成

可能这个不只是微信小程序的坑，但是我遇到了，就记录一下，希望对看到这篇文章的你有所帮助！

wx.uploadFile

它并不会像wx.request一样会解析服务器传回的JSON对象！

所以当你打印输出res.data的时候并不是JSON格式的！

而且也不可以直接调用res.data.pojo！

所以在这里需要自己手动转JSON：

var data = JSON.parse(res.data);
console.log(data);

通过JSON.parse() 可以看到data存入了JSON对象。下文使用的也是data。 

 页面更新机制

因为我这个图片是做头像用的，在上传图片以后，服务器返回给我一个图片名。图片名是PHOTO+userid.png或.jpg

所以如果传的新图片和原图片是同类型的，那么setData中要给图片存入的信息就会是完全一样的࿱

最低0.47元/天 解锁文章
LimonSea
关注
  • 5
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
微信小程序上传头像,使用wx.chooseImage； wx.uploadFile
ShawnWang22的博客
06-23 2330
微信小程序上传头像,使用wx.chooseImage; wx.uploadFile 注意使用时:我是通过点击事件触发上传头像方法
微信小程序 --- 图片自适应、本地图片的使用、redirect到tab的不刷新问题 ...
03-29
1、关于图片自适应 image标签中添加mode属性： (此图片来源于网络，如有侵权，请联系删除! ) 默认值：scaleToFill  ----  不保持纵横比例缩放图片，使图片的宽高完全拉伸至填满image标签 aspectFit  ----  保持纵横比例缩放图片，使图片的长边能够完全显示出来，也就说图片可以完整的显示出来 aspectFill  ----- 保持纵横比例缩放图片，只保证图片的短边能够完全显示出来，也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取 top  ----  不缩放图片，只显示图片的顶部区域 bottom  ----  不缩放图片，只显示图片
微信小程序 image组件图片更新不了问题
qq_44726321的博客
03-22 1688
1.在 图片路径在一个时间戳 可以解决图片无法更新问题 this.data.src = ‘https://img+’.jpg’+"?v="+new Date().getTime() this.setData({ src: this.data.src })
【微信小程序开发】图片加载问题解决
最新发布
weixin_43031313的博客
07-12 459
本文描述了微信小程序开发过程中图片无法加载显示的问题，并给出相应的原因和解决方法。
微信小程序wx.uploadFile上传图片以后setData没有作用
u014520797的专栏
06-12 1094
wx.chooseImage({ success (res) { const tempFilePaths = res.tempFilePaths wx.uploadFile({ url: 'https://example.weixin.qq.com/upload', //仅为示例，非真实的接口地址 filePath: tempFilePaths[0],...
微信小程序image组件图片更新不了问题
独行者103的专栏
10-03 1663
由于是生成的图片，路径永远都是一致的，所以不知道如何刷新，路径加上时间戳即可。 https://img+’.jpg’+"?v="+new Date().getTime(）
小程序头像上传成功但是小程序码没更新
MIT372的博客
04-08 1100
微信小程序头像上传了，但是小程序码没更新怎么处理？ 如图: 我们上传新的小程序头像成功，但是小程序码没更新，是不是让你怀疑人生？ 其实不用怀疑，退出登录，重新登录就行了
微信小程序 wx.cloud.uploadFile 多图片上传方法总结
热门推荐
hjiaqing的博客
12-05 1万+
自己最近在学习微信小程序云开发，写一写笔记便于查阅： 下面是一些方法。 一、 //uploadTap为button点击事件 uploadTap:function(){ var self = this; wx.chooseImage({ success: function(res) { console.log(res);//...
微信小程序上传图片、wx.chooseImage和wx.uploadFile方法上传图片
夜阑珊妖妖
01-11 3359
微信小程序上传图片、wx.chooseImage和wx.uploadFile方法上传图片 insertImage() { wx.chooseImage({ count: 1, success: (res) => { console.log(res); // this.setData({ // picsrc: ...
微信小程序如何将本地图片文件上传到服务器？wx.chooseImage& wx.uploadFile方法使用案例以及微信小程序如何获取input框的值。
weixin_44283973的博客
08-21 9296
微信图片文件上传需要用到的两个API分别是：wx.chooseImage（选择本地文件） 和 **wx.uploadFile（上传文件）**将本地图片上传到服务器需要转换2次，首先是将本地的图片转换为服务器地址，其次是将这个服务器地址发送给后台接收。你从后台拿到一个方法a，你接收到这个方法a来处理图片，然后你再去后台拿到一个方法b，你接收到这个方法b来上传已经处理过的图片，就是这个意思。后台会给...
微信小程序-调用组件，点击搜索，组件图片不刷新
m0_68428581的博客
09-22 120
在子组件中加上observers:{}即可。
uniapp在app端头像上传后无法实时刷新
qq_45872514的博客
04-29 1936
1、问题描述:使用image显示头像，在更新数据库资源文件之后再次发起请求获取头像，image显示头像不发生改变，需要重新登录才能更新(或重新登陆也不更新) 2、解决办法:在image控件中src图片路径后加随机数参数，如: < :scr="imgUrl+'?key='+time " 其中时间为当前时间，这样保证每次请求参数key的值都不一样，这样获取到的图片总是最新的，虽然图片请求本身并不需要这个key值，但避免了电脑直接获取缓存中图片数据。 ...
微信小程序图片缓存问题
CILOCILO
11-03 2536
微信小程序图片缓存问题 问题描述： 进入上传页面，先获取用户上传过的信息，点击上传，上传成功后，再次获取数据。 因为后台接口的设置是：图片直接覆盖存储，也就是两个图片名称相同。 这就会导致，上传，并重新获取数据后，图片没有更新。这就是微信小程序的图片缓存问题。 问题图片： 解决办法： // 在图片的名称后面加上一串变化的数字 // 一般为时间戳或随机数 http:xxx.xxx.com/upload/imgs/xxxx.png ? 235734632563456324(随机数) ...
后台更改图片，前端刷新但是图片不变
m0_46678928的博客
03-11 2224
后台更改图片，前端刷新但是图片不变
微信小程序上传图片后 开发者工具自动刷新问题
oldcoder2000的博客
08-28 1987
问题描述：通过wx.uploadFile上传图片后，小程序端还没来得及显示服务端返回已成功上传的文件信息，小程序开发者工具就自动刷新，不论你如何打断点，都不会停下来，导致无法保存上传的数据。在网上找了很久才知道，是我自己服务端文件夹放错了目录，放在了小程序文件夹，微信小程序开发者工具会监听文件，当有文件变化时，开发者工具就会自动编译刷新。改成如下目录结构就好了，将服务端server目录从miniprogram目录提取出来单独存放就Ok了。...
微信小程序wx.uploadFile的两个坑
流氓兔
10-23 3200
setImage:function(e){ var _this = this　　//坑1 wx.chooseImage({ count: 1, sizeType: [‘original’, ‘compressed’], sourceType: [‘album’, ‘camera’], success: function (res) { var tempFilePaths = res.tempFil...
微信小程序数组更新，但视图不更新的问题
学习，是熵减的最有效途径。
05-10 7118
写一个微信小程序的时候，需要在云数据库中拉取所有用户数据，展示到页面上，展示用户列表，一开始是这么实现的
uni-app转成微信小程序上传图片回显
05-17
要在微信小程序中上传图片并回显，你可以使用微信小程序的 API `wx.chooseImage` 和 `wx.uploadFile`。 1. 首先，在页面中引入 `wx.chooseImage` API： ``` // uni-app 中引入微信小程序 API 的方式 import weixin from '@/utils/weixin.js'; // 在 methods 中添加以下代码 chooseImage() { weixin.chooseImage({ count: 1, // 最多可以选择的图片张数，默认1 sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有 sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有 success: res => { // 选择成功后，将图片路径保存到 data 中 this.setData({ imgUrl: res.tempFilePaths[0] }); }, fail: err => { console.log(err) } }); }, ``` 2. 然后，在 `wx.uploadFile` 中上传图片： ``` uploadImage() { const url = 'http://example.com/upload'; // 上传图片的接口地址 const filePath = this.data.imgUrl; // 图片路径 wx.uploadFile({ url, filePath, name: 'file', formData: { // 其他参数 }, success: res => { // 上传成功后，将图片地址保存到 data 中 const data = JSON.parse(res.data); this.setData({ imgUrl: data.url }); }, fail: err => { console.log(err) } }); }, ``` 3. 最后，在页面中显示图片： ``` <image :src="imgUrl"></image> ``` 这样，当用户选择图片并上传成功后，图片就会在页面中显示出来。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值