选择一个照片上传（带进度条）

最新推荐文章于 2025-06-22 14:51:47 发布

原创最新推荐文章于 2025-06-22 14:51:47 发布 · 330 阅读

CC 4.0 BY-SA版权

本文介绍了一个小程序中实现图片上传功能的方法，包括使用uni.chooseImage选择图片，通过uni.uploadFile上传图片到服务器，并展示了PHP后端如何接收并保存上传的图片。详细解释了上传过程中的进度更新监听和后端文件接收的代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
    <view>
  <view>
   <progress :percent="percent" stroke-width="10"></progress>
  </view>
  <view>
   <button type="primary" :loading="loading" :disabled="disabled" @click="upload">选择照片</button>
  </view>
 </view>
 
</template>
<script>
var _self;
export default {
 data:{
  percent:0,
  loading:false,
  disabled:false
 },
 methods : {
  upload : function(){
   _self = this;
   uni.chooseImage({
    count: 1,
    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album'], //从相册选择
    success: function (res) {
     const tempFilePaths = res.tempFilePaths;
     const uploadTask = uni.uploadFile({
      url : 'https://demo.hcoder.net/index.php?c=uperTest',
      filePath: tempFilePaths[0],
      name: 'file',
      formData: {
       'user': 'test'
      },
      success: function (uploadFileRes) {
       console.log(uploadFileRes.data);
      }
     });
 
     uploadTask.onProgressUpdate(function (res) {
      _self.percent = res.progress;
      console.log('上传进度' + res.progress);
      console.log('已经上传的数据长度' + res.totalBytesSent);
      console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
     });
    },
    error : function(e){
     console.log(e);
    }
   });
  }
 },
    onLoad:function(){
  
    }
}
</script>

后端文件接收代码（php 版）

<?php
class uperTestController extends witController{
    public function index(){
        if(!empty($_FILES['file'])){
            //获取扩展名
            $exename  = $this->getExeName($_FILES['file']['name']);
            if($exename != 'png' && $exename != 'jpg' && $exename != 'gif'){
                exit('不允许的扩展名');
            }
            $imageSavePath = uniqid().'.'.$exename;
            if(move_uploaded_file($_FILES['file']['tmp_name'], $imageSavePath)){
                echo $imageSavePath;
            }
        }
    }
    
    public function getExeName($fileName){
        $pathinfo      = pathinfo($fileName);
        return strtolower($pathinfo['extension']);
    }
}