微信小程序之文件和图片的上传

最新推荐文章于 2024-08-02 00:07:06 发布

盛夏温暖流年

最新推荐文章于 2024-08-02 00:07:06 发布

阅读量5k

点赞数 3

分类专栏：微信小程序文章标签：小程序文件上传图片上传

本文链接：https://blog.csdn.net/j1231230/article/details/109405737

版权

本文详细介绍了微信小程序中如何进行图片选择上传和文件选择上传。提供了对应的wxml和js代码示例，并提到了通用的上传服务类myModel.js。此外，还列举了其他关于微信小程序的相关博客话题。

摘要由CSDN通过智能技术生成

微信小程序能够很好的支持图片的选取和上传，但是对于文件类型，只支持从聊天中选取并上传，也算勉强满足了需求，以下就是两种不同方式的上传。

一. 图片选择上传

wxml 代码:

<view class="image-picture">
   <i-avatar i-class="image-size" src="{
   {photo}}" bindtap="changeImage"></i-avatar>
   <view class="edit-image" bindtap="changeImage">编辑头像</view>
</view>

js 代码：

changeImage: function (e) {
   
    var that = this;
    console.log("点击编辑图片");
    wx.chooseImage({
   
      count: 1,
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
   
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths;
        my.uploadFile(that, tempFilePaths, 0