小程序实现图片预览+上传

偏执的太偏执、 2023-10-05 20:16 27阅读 0赞

废话不多说，直接上代码。我这里是mpvue的写法，可能与原生的小程序有部分不一样的，请注意。

// 选择图片
    avatarChoose() {
        
     var that = this 
     wx.showActionSheet({
        
       itemList: ['从手机相册选择'],
       success: function(res) {
        
         //选择照片     
         wx.chooseImage({
        
          count: 1, // 选择图片张数，默认9
          sizeType: ['compressed'], // 可以指定是原图original还是压缩图compressed，默认二者都有
          sourceType: ['album'], // 可以指定来源是相册还是相机，默认二者都有
          success: function (res) {
        
            console.info(res)
            var size = res.tempFiles[0].size  //获取图片的大小，单位B
            var path = res.tempFiles[0].path;
            var formatImage = path.split(".")[(path.split(".")).length - 1];
            if(size > 1024*1024){
           //图片大于指定大小时，提示错误
              that.errorMsg = '图片超出1M大小'
              res.tempFiles[0] = null
              res.tempFilePaths[0] = null
            }else if (formatImage != "png" && formatImage != "jpg" && formatImage != "jpeg") {
         //判断图片类型，实际上在手机上操作不需要这一步判断
              that.errorMsg = '图片格式只支持png、jpg、jpeg'
              res.tempFiles[0] = null
              res.tempFilePaths[0] = null
            }else{
                                            
              var tempFilePaths = res.tempFilePaths[0] //不能传数组，要获取下标0的图片                                
              that.pageForm.avatar = tempFilePaths  //把图片的临时路径赋值给我们定义好的变量
              that.errorMsg = '' //将错误提示置空
            }
          }
        })
       }
     })
    },
    onSubmit(values) {
        
     let that = this 
     // 必要的参数合法性验证，此处省略
     
     wx.uploadFile({
         //上传文件固定用法，不要使用 wx.request
         url: that.baseUrl+'xxx', //后台url，需要在微信公众号平台的uploadFile配置https的域名
         filePath: that.pageForm.avatar, //图片路径
         method: 'POST',//方法POST、PUT、DELETE、GET
         name: 'file', //后台获取的凭据，与后台一致
         header: {
        
             "Content-Type":"multipart/form-data;charset=utf-8" //上传文件的请求头，固定写法
         },
         formData: that.pageForm,//其它参数
         success (res) {
         //上传成功
             console.info(res)
             //其它逻辑请自行添加，比如页面跳转，弹出提示框等
         },                   
         fail: function (res) {
         //上传失败
             console.error(res)
             Toast('操作失败')                   
         }
     })
    },

页面上引用

<div class="avatar" @click="avatarChoose">
        <img :src="pageForm.avatar"/>
    </div>
    
    <button class="btn" @click="onSubmit">立即提交</button>