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

}

}

app开发上传文件夹到服务器,uni-app 上传(图片上传实战)相关推荐

  1. 用ftp上传到服务器视频文件夹,ftp 上传文件夹到服务器

    ftp 上传文件夹到服务器 内容精选 换一换 上传的文件和上传的文件夹中包含的文件支持的格式请参见支持的文件格式.文件上传:从本地上传:在Projects Explorer视图中选中一个文件夹,依次单 ...

  2. ftp 文件夹 上传到服务器,ftp上传文件夹到服务器 远程路径

    ftp上传文件夹到服务器 远程路径 内容精选 换一换 WinSCP工具可以实现在本地与远程计算机之间安全地复制文件.与使用FTP上传代码相比,通过 WinSCP 可以直接使用服务器账户密码访问服务器, ...

  3. 电脑服务器传文件夹吗,服务器和电脑传文件夹吗

    服务器和电脑传文件夹吗 内容精选 换一换 Model File:模型文件.单击右侧的文件夹图标,在后台服务器sample所在路径(工程目录/run/out/test_data/resnet-18/mo ...

  4. 在服务器上创建文件夹,在服务器上创建文件夹

    在服务器上创建文件夹 内容精选 换一换 在迁移之前必须先创建输入文件夹和输出文件夹,并将待迁移的所有SQL脚本复制到输入文件夹中.Linux系统操作如下:由于DSC批量无序地读取输出文件夹,因此,建议 ...

  5. js并发上传文件到不同服务器,simple-uploader.js 功能强大的上传组件 - 文章教程

    simple-uploader.js(也称 Uploader)是一个上传库,支持多并发上传,文件夹.拖拽.可暂停继续.秒传.分块上传.出错自动重传.手工重传.进度.剩余时间.上传速度等特性:该上传库依 ...

  6. okhttp上传文件结束后服务器才收到,okhttp3 Null Respone上传文件

    嗨,我想上传一个JPG文件使用okhttp3的多部分请求到一个PHP服务器.该脚本检查$ _FILES ["image1"]并从html表单正常工作.当使用下面的代码时,我从服务器 ...

  7. http上传文件到ftp服务器,HTTP协议与FTP协议上传文件的优缺点

    1:用http协议上传更适合web编程的方便:传小于1M文件速度要比用ftp协议上传文件略快.安全性好:不像ftp那样:必须要启动一个ftp服务才行.2:用ftp协议上传文件大于1M的文件速度比htt ...

  8. asp上传文件到ftp服务器,ASP.NET 中使用 FTP 上传文件

    public static void Upload(string filePath) { FtpWebRequest ftp = (FtpWebRequest)WebRequest.Create(&q ...

  9. Ftp实现上传文件至远程服务器

    服务器安装FTP服务 1.安装vsftpd yum -y install vsftpd 2.关闭匿名访问 vim /etc/vsftpd/vsftpd.conf 将anonymous_enable的值 ...

最新文章

  1. angular 命令行项目_Angular命令行界面介绍
  2. 剑指offer之数组中的逆序对
  3. 工作之余,如何再赚一份收入?
  4. android xutil 数据库,Android XUtils3框架的基本使用方法(二)
  5. PhpMyAdmin 配置文件现在需要一个短语密码的解决方法
  6. Android View动画
  7. 复杂脑网络之图论参数计算(BCT工具包)
  8. 微型计算机原理与接口周荷琴,微型计算机原理与接口技术周荷琴
  9. java制作名片applet程序_【小程序 提取码:krua】壹佰智能名片小程序版本V1.1.45 – 持续更新 无后门...
  10. c语言 英文单词频率统计 哈希存储
  11. 营收同比增长13.55%  领跑ICT的中天科技为何跌了?
  12. 峰哥买房用的贝壳app,他们的大数据平台如何实现的?
  13. php数字和字母互换,PHP实现十进制数字与二十六进制字母串相互转换操作示例
  14. 换了爸爸,推特用户坐不住了……
  15. 中国铁路 12306 网站的高并发架构带来的思考?研究分析后,果然超牛逼…
  16. (艾迪茉莉转圈圈~~找最小环)Circular Sequence UVA - 1584
  17. docker 应用系列(一)--- 一步步搭建虚拟机 docker 环境 附有 vue-cli + nginx 应用
  18. WIN10安装CH340驱动出现感叹号的解决办法总结
  19. java和连接数据库的驱动_java中连接各数据库的驱动类和连接方式
  20. 小甲鱼Python笔记

热门文章

  1. 【ElementUI】 table表格尾部的合计行,固定表头却不显示合计行
  2. Centos 7 上 查看MySQL当前使用的配置文件my.cnf的方法
  3. 143. 最大异或对【贪心 trie】
  4. 1128 N Queens Puzzle (20 分)【难度: 一般 / 知识点: 模拟】
  5. MySQL与Oracle的区别
  6. Spring boot切换Servlet容器
  7. Synchronize对象属性改变
  8. 【PAT笔记】C++标准模板库STL(二)——set的用法和示例
  9. 拿了 30K 的 offer!
  10. 都说了多少遍,不要再学 JSP 了!