uni.uploadfile php,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 返回参数说明

实战页面

选择照片

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

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

}

});

}

});

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

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

欢迎关注达达的简书！

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