专栏首页达达前端uni-app 图片上传实战

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序订阅消息功能

    消息能力是小程序能力中的重要组成,我们为开发者提供了订阅消息能力,以便实现服务的闭环和更优的体验。

    达达前端
  • 微信小程序前端function封装

    达达前端
  • 微信小程序消息通知-打卡考勤

    达达前端
  • uni-app实战之路-获取用户地址和基本信息

    开发小程序避免不了的是获取用户的信息,地址等,今天就简单的记录一下我实现的过程,因为我多个地方要用到,所以我这里直接写到vuex里面,你们看情况,不需要用的可以...

    何处锦绣不灰堆
  • jQuery的deferred对象详解

    在讲述Promise时,曾提及过Deferred对象。下面内容,详细阐述Deferred对象及其用法。

    奋飛
  • 微信小程序订阅消息功能

    消息能力是小程序能力中的重要组成,我们为开发者提供了订阅消息能力,以便实现服务的闭环和更优的体验。

    达达前端
  • Python-接口自动化(七)

    1、requests是用python语言编写,属于第三方库,基于urllib,采用Apache2 Licensed开源协议的HTTP库,它比urllib更加方便...

    py3study
  • 基于Hadoop生态圈的数据仓库实践 —— 进阶技术(六)

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.n...

    用户1148526
  • LDAP落地实战(三):GitLab集成OpenLDAP认证

    当重启完成后登陆报:Could not authenticate you from Ldapmain because "Invalid credentials"...

    37丫37
  • apache与tomcat整合

    Apache只是一个Web服务器,可以作为独立的web服务器来运行,不过只支持静态网页,如(asp,php,cgi,jsp)等动态网页的就显得无能为力。

    致码DevOps

扫码关注云+社区

领取腾讯云代金券