美文网首页
微信小程序之图片文件上传

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

作者: Amazing慕丶涵 | 来源:发表于2020-08-19 19:55 被阅读0次

一、查看小程序手册:

选择图片:https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html

上传图片:https://developers.weixin.qq.com/miniprogram/dev/api/network/upload/wx.uploadFile.html

二、上传图片界面和实现逻辑

上传图片界面

实现逻辑

小程序身份认证界面,点击上传地方的加号,选择相册或者拍照,进行上传,原图无压缩,最多上传3张(分别为身份证正面、反面和手持)

三、服务器后台定义文件上传路由和文件上传方法

注:这边以laravel框架为例

1、定义文件上传路由:

Route::group(['middleware'=>'auth:api','prefix'=>'v1','namespace'=>'Api'],function (){
    // 用户身份认证信息文件上传
    Route::post('user/up_file','UserController@up_file');
});

2、在laravel框架中的config文件夹下的filesystems.php文件中配置上传路径

配置文件上传路径

3、身份认证文件上传方法

// 身份认证文件上传
    public function up_file(Request $request)
    {
        
        if ($request->hasFile('file')) {
            // 上传
            $ret = $request->file('file')->store($request->get('openid'), 'card');
            $pic = '/uploads/card/' . $ret;
            return ['status' => 0, 'url' => $pic];
        }
        return ['status' => 10005, 'msg' => '无图片上传'];
    }

四、小程序中的文件上传步骤

1、在身份认证界面的wxml中绑定选择图片事件

wxml中绑定选择图片事件

2、在身份认证界面的js中定义上传图片的方法

js中定义上传图片的方法
代码如下:
// 身份认证文件上传
  up_file(){
    wx.chooseImage({
      count: 3,
      sizeType: ['original', 'compressed'], // original 原图   compressed 压缩图
      sourceType: ['album', 'camera'], // album 从相册选图    camera  使用相机
      success: res => {
        // console.log(res);
        // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths
        // 开始身份文件上传
        tempFilePaths.map(filepath => {
          wx.uploadFile({
            url: config.up_file, 
            filePath: filepath,
            name: 'file',
            header: {
              'Authorization': 'Bearer '+cache.get('token')
            },
            formData: {
              'openid': cache.get('openid')
            },
            success: res=>{
              console.log(res);
              let json = JSON.parse(res.data);
              console.log(json);
              this.setData({
                up_file: [...this.data.up_file,json.url]
              });
            }
          })
        })
      }
    })
  }

3、上传成功后,将上传的文件地址存到数组中

将上传的文件地址存到数组中
参数的展开 上传成功后,将上传的文件地址存到数组中

最后,将数据存到数据库就行了。

相关文章

网友评论

      本文标题:微信小程序之图片文件上传

      本文链接:https://www.haomeiwen.com/subject/ebqdjktx.html