演示

在这里插入图片描述

一、后端代码


public function insert(){
	//获取图片文件
    $file = request()->file('img');
    if($file){
    	//存储图片（上传图片）到public/static/img_product目录下面，加上rule('uniqid')表示不生成当天日期为名的文件，如果不加这个，那么上传的图片会保存在'public/static/img_product/20190912/‘这样结构的目录下面
        $info = $file->rule('uniqid')->move(ROOT_PATH . 'public/images/');
        $name = $info->getFilename();
        return $name;
    }else{
       $data=[
            'code'=>200,
            'msg'=>'添加失败',
        ];
        return json($data);
    }
    
}

二、小程序代码

1.wxml

<button type="primary" bindtap="doUpload" style="margin-top: 150rpx;">上传图片</button>

2.css

3.js

 doUpload: function () {
    // 选择图片
    wx.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success: function (res) {
        wx.showLoading({
          title: '上传中',
        })
console.log(res);
        // const filePath = res.tempFilePaths[0]
        wx.uploadFile({
          url: 'https://*******/Index/Api/insert', //仅为示例，非真实的接口地址
          filePath: res.tempFilePaths[0],
          name: 'img',
          formData: {
           
          },
          success (res){
            const data = res.data
           console.log(data);
           //返回图片名称
          if (res.data!='') {
            wx.hideLoading({
              success: (res) => {
               setTimeout(() => {
                 wx.showToast({
                   title: '上传成功！',
                 })
               }, 2000);
              },
            })
          } else {
            wx.hideLoading({
              success: (res) => {
               setTimeout(() => {
                 wx.showToast({
                   title: '上传失败！',
                   icon:'none'
                 })
               }, 2000);
              },
            })
          }
           
            //do something
          }
        })
      },
      fail: e => {
        console.error(e)
      }
    })
   
  },