uni-app 图片上传实战

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

multipart/form-data

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

url String 是 开发者服务器 url files Aarry 否 需要上传的文件列表filePath String 是 要上传文件资源的路径name String 是 文件对应的keyheader 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, // 默认9sizeType: ['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 图片上传实战相关推荐

App图片上传Base64图片上传
/*** @Method base64图片上传* @author Angus* return array* date 2018-05-04*/ function saveBase64Image($ba ...
app开发上传文件夹到服务器,uni-app 上传（图片上传实战）
uni.uploadFile(OBJECT) 将本地资源上传到开发者服务器,客户端发起一个 POST 请求,其中 content-type 为 multipart/form-data. 如页面通过 u ...
base64图片上传Java上传
controller层获取图片数据调用upload方法 String imagesUrl = null;//获取图片信息String imageBaseStr = reqData.getImageBa ...
uni App多图片上传，java后台接收
前台页面: <wslimg title="图片上传" :num="9" :dataList="dataLi ...
实战SSM_O2O商铺_15【商铺注册】View层+Controller层之图片上传
文章目录概述 Maven依赖文件上传解析器bean的配置页面 shopoperation.html增加上传组件 shopoperation.js Controller层 Github地址概述 ...
富文本编辑器Ueditor实战（二）-图片上传
本文接前文富文本编辑器Ueditor实战(一),前文留了一个问题,就是图片上传功能无法使用,报后台配置错误的问题.那么应该如何配置图片上传功能呢?本文将使用jsp+tomcat的方式进行说明如何动态配 ...
uni-app - 头像图片裁剪组件（支持多种裁剪，手势控制旋转或缩放、内外部控制图片移动、提供上传后端接口方案、头像图片美化）全端完美兼容 H5 App 小程序，最好用的图片上传后裁剪插件教程源代码
前言网上的教程代码非常乱且都有 BUG 存在,非常难移植到自己的项目中,而且很难. 实现了完美兼容 H5 App 小程序,选取手机本地相册或拍照,图片上传裁切内置多种方案,样式随便改, 本文代码干 ...
Android 嵌套H5 网页，图片上传无法调用手机图片以及嵌套网页中无法调用另一款APP问题记录
最近项目中用到安卓原生APP 嵌套H5网页,使用安卓原生WebView实现,主要遇到以下两种问题,特此记录: 在H5页面,返回直接回到APP中监听安卓的返回事件就行了 @Override publi ...
基于android的图片上传分享系统相册app
该图片上传分享系统是一款基于安卓的双端程序,客户端采用eclipse作为开发平台,服务端采用了myeclipse作为开发平台,数据库是mysql,主要实现了图片的编辑和上传的功能,界面美观大气,功能技 ...

uni-app 图片上传实战

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

欢迎关注达达的简书！

uni-app 图片上传实战相关推荐

最新文章

热门文章