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

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

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

欢迎关注达达的简书！

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