zoukankan      html  css  js  c++  java
  • 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');
                }
            });
        }
    });
    

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


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

    欢迎关注达达的简书!

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

    博客

  • 相关阅读:
    Java实现 LeetCode 792 自定义字符串排序(暴力)
    Java实现 LeetCode 792 自定义字符串排序(暴力)
    asp.net session对象的持久化
    Java实现 LeetCode 791 自定义字符串排序(桶排序)
    Java实现 LeetCode 791 自定义字符串排序(桶排序)
    Java实现 LeetCode 791 自定义字符串排序(桶排序)
    Java实现 LeetCode 790 多米诺和托米诺平铺(递推)
    Java实现 LeetCode 790 多米诺和托米诺平铺(递推)
    Java实现 LeetCode 790 多米诺和托米诺平铺(递推)
    小白也能看懂的约瑟夫环问题
  • 原文地址:https://www.cnblogs.com/dashucoding/p/11667895.html
Copyright © 2011-2022 走看看