微信小程序上传图片代码：最新可用(后端代码+前端代码)

布满荆棘的人生 2023-10-01 20:57 37阅读 0赞

#### 文章目录 ####

*  演示
 *  一、后端代码
 *  二、小程序代码
 *   *  1.wxml
     *  2.css
     *  3.js
 *  总结

--------------------

## 演示 ##

![在这里插入图片描述][eb2b9ef253f048359f3ab2480b07ed0e.gif_pic_center]

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b635a6P5aSn6a2U546L_size_20_color_FFFFFF_t_70_g_se_x_16]

--------------------

## 一、后端代码 ##

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 ###

### 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)
          }
        })
       
      },

--------------------

## 总结 ##

以上就是今天要讲的内容

[eb2b9ef253f048359f3ab2480b07ed0e.gif_pic_center]: https://img-blog.csdnimg.cn/eb2b9ef253f048359f3ab2480b07ed0e.gif#pic_center
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b635a6P5aSn6a2U546L_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/5f391606fe8b40949710fb686088046f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5b635a6P5aSn6a2U546L,size_20,color_FFFFFF,t_70,g_se,x_16