IT评测·应用市场-qidao123.com技术社区

标题: 微信小程序实现图片上传（清晰版） [打印本页]

---

作者: 来自云龙湖轮廓分明的月亮    时间: 2024-6-11 22:29
标题: 微信小程序实现图片上传（清晰版）

• 在wxml文件中添加一个按钮和一个image标签用于显示上传的图片
  1. <view>
  2.   <button bindtap="chooseImage">选择图片</button>
  3.   <image src="{{imageUrl}}" />
  4. </view>

  复制代码
  
  
• 在js文件中添加选择图片和上传图片的方法
  1. Page({
  2.   data: {
  3.     imageUrl: ''
  4.   },
  5.   chooseImage() {
  6.     wx.chooseImage({
  7.       count: 1, // 可选择的图片数量
  8.       sizeType: ['compressed'], // 压缩图片
  9.       sourceType: ['album', 'camera'], // 来源：相册或相机
  10.       success:  (res)=> {
  11.         // 将选择的图片上传到服务器
  12.         this.uploadImage(res.tempFilePaths[0]);
  13.       }
  14.     })
  15.   },
  16.   uploadImage(imagePath) {
  17.     wx.uploadFile({
  18.       url: '服务器地址', // 上传图片的接口地址
  19.       filePath: imagePath, // 图片文件路径
  20.       name: 'image', // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
  21.       success: (res) => {
  22.         // 上传成功后，将服务器返回的图片地址更新到image标签中
  23.         this.setData({
  24.           imageUrl: res.data
  25.         });
  26.       },
  27.       fail: function (res) {
  28.         console.log(res);
  29.       }
  30.     })
  31.   }
  32. })

  复制代码
  
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/)

Powered by Discuz! X3.4