uni-app 图片上传-CFANZ编程社区

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	否	接口回调结束的回调函数（调用成功、失败都会执行）

图片上传及进度条显示

<template>
    <View>
        {{name}}---{{age}}
        <!-- 上传进度条 -->
        <progress :percent="percent" stroke-width="10"></progress>
        <button @click="img">选择照片</button>
    </View>
</template>

<script>
var _self;
    export default {
        data(){
            return{
                percent:0,
                age:'',
                name:''
            }
        },
        onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
            console.log(option.age); //打印出上个页面传递的参数。
            console.log(option.name); //打印出上个页面传递的参数。
            this.age=option.age;
            this.name=option.name;
            _self=this;
        },
        methods:{
            img:function(){
                uni.chooseImage({
                    count: 1,
                    sizeType:"compressed",
                    success: (res) => {
                        console.log(res);
                        // 浏览
                        // uni.previewImage({
                        //     urls: res.tempFilePaths
                        // })
                        var imgsFile=res.tempFilePaths[0];
                        var uper=uni.uploadFile({
                            url: 'https://demo.hcoder.net/index.php?c=uperTest',
                            filePath: imgsFile,
                            name: 'file',
                            success:function(res1){
                                console.log(res1);
                            }
                        });
                        //修改进度条
                        uper.onProgressUpdate(function(e){
                            _self.percent=e.progress;
                            console.log('上传进度'+e.progress);
                            console.log('已上传数据长度'+e.totalBytesSent);
                            console.log('数据总长度'+e.totalBytesExpectedToSend);
                        });
                    }
                })
            }
        }
    }
</script>

<style>
    
</style>

uni.downloadFile(OBJECT)

下载文件资源到本地，客户端直接发起一个HTTP GET请求，返回文件的本地临时路径。

OBJECT 参数说明：

参数名	类型	必填	说明
url	String	是	下载资源的url
header	Object	否	HTTP请求Header，header中不能设置Referer
success	Function	否	下载成功后以tempFilePath的形式给页面，res={tempFilePath:'文件的临时路径'}
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

uni.downloadFile({
                url: 'http://www.example.com/file/test',//下载地址
                success:function(res){
                    if(res.statusCode===200){
                        console.log('下载成功');
                    }
                }
            });
            // 下载监听
            downloadTask.onProgressUpdate(function(res){
                console.log('下载进度'+res.progress);
                console.log('已经下载数据长度'+res.totalBytesWritten);
                console.log('数据总长度'+res.totalBytesExpectedToWrite);
                
                
            })