uni-app 图片上传实战

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 返回参数说明实战页面

<progress :percent="percent" stroke-width="10"></progress>

<button type="primary" :loading="loading" :disabled="disabled" @click="upload">选择照片</button>

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

            }

        });

    }

});

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

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

欢迎关注达达的简书！

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

巴特西

uni-app 图片上传实战

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

欢迎关注达达的简书！

最新文章

热门文章