uni-app 图片上传实战

朴灿烈づ我的快乐病毒、 2021-07-24 23:38 419阅读 0赞

uni.uploadFile()将本地资源上传到开发者服务器客户端发起一个post请求content-type

multipart/form-data

通过uni.chooseImage获取一个本地资源的临时文件路径后将本地资源上传到指定服务器

url String 是 开发者服务器 url 
    
    files Aarry 否 需要上传的文件列表
    
    filePath String 是 要上传文件资源的路径
    
    name String 是 文件对应的key
    
    header Object 否 HTTP 请求 Header, header 中不能设置 Referer

uploadTask 对象的方法列表

onProgressUpdate callback 监听上传进度变化

abort 中断上传任务

onProgressUpdate 返回参数说明实战页面

data:{
      percent:0,
      loading:false,
      disabled:false
     },

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

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']);
        }
    }

uni.chooseImage(OBJECT) 从本地相册选择图片或使用相机拍照文件的临时路径，在应用本次启动期间可以正常使用，如需持久保存，需在主动调用 uni.saveFile，在应用下次启动时才能访问得到。

tempFilePaths 
    StringArray 图片的本地文件路径列表
    
    tempFiles 
    ObjectArray 图片的本地文件列表，每一项是一个 File 对象

File 对象结构如下

path String 本地文件路径
    size Number 本地文件大小，单位：B

uni.chooseImage({
     count: 6, // 默认9
     sizeType: ['original', 'compressed'], // 原图，压缩图
     sourceType: ['album'], // 从相册选择
     success: function(res) {
      console.log(JSON.stringify(res.tempFilePaths));
        }
    });
    uni.previewImage();

预览图片

current 当前显示图片的链接
    
    urls 需要预览的图片链接列表

uni.chooseImage({
     count: 6,
     sizeType: ['original','compressed'],
     sourceType: ['album'],
     success: function(res) {
      // 预览图片
        uni.previewImage({
         urls: res.tempFilePaths
        });
     }

uni.getImageInfo()获取图片信息

orientation 参数说明
    
    枚举值 说明
    
    up 默认
    down 180度旋转
    left 逆时针旋转90度
    right 顺时针旋转90度
    
    up-mirrored 同up，但水平翻转
    down-mirrored 同down，但水平翻转
    left-mirrored 同left，但垂直翻转
    right-mirrored 同right，但垂直翻转

uni.chooseImage({
        count: 1,
        sourceType: ['album'],
        success: function (res) {
            uni.getImageInfo({
                src: res.tempFilePaths[0],
                success: function (image) {
                    console.log(image.width);
                    console.log(image.height);
                }
            });
        }
    });

uni.saveImageToPhotosAlbum(OBJECT)

保存图片到系统相册

filePath 图片文件路径

uni.chooseImage({
        count: 1,
        sourceType: ['camera'],
        success: function (res) {
            uni.saveImageToPhotosAlbum({
                filePath: res.tempFilePaths[0],
                success: function () {
                    console.log('save success');
                }
            });
        }
    });

###  ###

若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。

###  ###

## 请点赞！因为你们的赞同/鼓励是我写作的最大动力！ ##

### 欢迎关注[达达][Link 1]的简书！ ###

**这是一个有质量，有态度的博客**

![博客][2019101319151485.jpeg]

[Link 1]: https://www.jianshu.com/u/c785ece603d1
[2019101319151485.jpeg]: /images/20210724/78583a4c12c846ebb71c25fbd4c2c965.png