app开发上传文件夹到服务器,uni-app 上传（图片上传实战）

uni.uploadFile(OBJECT)

将本地资源上传到开发者服务器，客户端发起一个 POST 请求，其中 content-type 为 multipart/form-data。

如页面通过 uni.chooseImage 等接口获取到一个本地资源的临时文件路径后，可通过此接口将本地资源上传到指定服务器。

OBJECT 参数说明

参数名 类型 必填 说明 平台支持url String 是 开发者服务器 url

files Aarry 否 需要上传的文件列表。使用 files 时，filePath 和 name 不生效。 5+App

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

name String 是 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容

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

formData Object 否 HTTP 请求中其他额外的 form data

success Function 否 接口调用成功的回调函数

fail Function 否 接口调用失败的回调函数

complete Function 否 接口调用结束的回调函数(调用成功、失败都会执行)

files参数说明

files 参数是一个 file 对象的数组，file 对象的结构如下：name String 否 multipart 提交时，表单的项目名，默认为 file

uri String 是 文件的本地地址

success 返回参数说明

参数 类型 说明data String 开发者服务器返回的数据

statusCode Number 开发者服务器返回的 HTTP 状态码

返回值返回一个 uploadTask 对象，通过 uploadTask，可监听上传进度变化事件，以及取消上传任务。

uploadTask 对象的方法列表onProgressUpdate callback 监听上传进度变化

abort 中断上传任务

onProgressUpdate 返回参数说明

参数 类型 说明progress Number 上传进度百分比

totalBytesSent Number 已经上传的数据长度，单位 Bytes

totalBytesExpectedToSend Number 预期需要上传的数据总长度，单位 Bytes

实战：选择一个照片上传(带进度条)

选择照片

var _self;

export default {

data:{

percent:0,

loading:false,

disabled:false

},

methods : {

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

}

});

}

},

onLoad:function(){

}

}

后端文件接收代码(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']);

}

}