前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >uni-app 图片上传实战

uni-app 图片上传实战

作者头像
达达前端
发布2019-10-14 16:16:27
5.5K0
发布2019-10-14 16:16:27
举报
文章被收录于专栏:达达前端

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

代码语言:javascript
复制
multipart/form-data

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

代码语言:javascript
复制
url String 是 开发者服务器 url 

files Aarry 否 需要上传的文件列表

filePath String 是 要上传文件资源的路径

name String 是 文件对应的key

header Object 否 HTTP 请求 Header, header 中不能设置 Referer 

uploadTask 对象的方法列表

onProgressUpdate callback 监听上传进度变化

abort 中断上传任务

onProgressUpdate 返回参数说明 实战页面

代码语言:javascript
复制
<progress :percent="percent" stroke-width="10"></progress>

<button type="primary" :loading="loading" :disabled="disabled" @click="upload">选择照片</button>
代码语言:javascript
复制
data:{
  percent:0,
  loading:false,
  disabled:false
 },
代码语言:javascript
复制
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

代码语言:javascript
复制
<?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,在应用下次启动时才能访问得到。

代码语言:javascript
复制
tempFilePaths 
StringArray 图片的本地文件路径列表

tempFiles 
ObjectArray 图片的本地文件列表,每一项是一个 File 对象

File 对象结构如下

代码语言:javascript
复制
path String 本地文件路径
size Number 本地文件大小,单位:B
代码语言:javascript
复制
uni.chooseImage({
 count: 6, // 默认9
 sizeType: ['original', 'compressed'], // 原图,压缩图
 sourceType: ['album'], // 从相册选择
 success: function(res) {
  console.log(JSON.stringify(res.tempFilePaths));
    }
});
uni.previewImage();

预览图片

代码语言:javascript
复制
current 当前显示图片的链接

urls 需要预览的图片链接列表
代码语言:javascript
复制
uni.chooseImage({
 count: 6,
 sizeType: ['original','compressed'],
 sourceType: ['album'],
 success: function(res) {
  // 预览图片
    uni.previewImage({
     urls: res.tempFilePaths
    });
 }

uni.getImageInfo() 获取图片信息

代码语言:javascript
复制
orientation 参数说明

枚举值 说明

up 默认
down 180度旋转
left 逆时针旋转90度
right 顺时针旋转90度

up-mirrored 同up,但水平翻转
down-mirrored 同down,但水平翻转
left-mirrored 同left,但垂直翻转
right-mirrored 同right,但垂直翻转
代码语言:javascript
复制
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 图片文件路径

代码语言:javascript
复制
uni.chooseImage({
    count: 1,
    sourceType: ['camera'],
    success: function (res) {
        uni.saveImageToPhotosAlbum({
            filePath: res.tempFilePaths[0],
            success: function () {
                console.log('save success');
            }
        });
    }
});
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019.10.13 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云服务器
云服务器(Cloud Virtual Machine,CVM)提供安全可靠的弹性计算服务。 您可以实时扩展或缩减计算资源,适应变化的业务需求,并只需按实际使用的资源计费。使用 CVM 可以极大降低您的软硬件采购成本,简化 IT 运维工作。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档