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');
}
});
}
});
若本号内容有做得不到位的地方(比如:涉及版权或其他问题),请及时联系我们进行整改即可,会在第一时间进行处理。
请点赞!因为你们的赞同/鼓励是我写作的最大动力!
欢迎关注达达的简书!
这是一个有质量,有态度的博客
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!