uniapp小程序---图片上传_uniapp小程序上传图片

图片上传

uni.uploadFile(OBJECT)

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

（这里附上官方链接，可以详细的看一下官方文档是怎么描述的uniapp文件上传官方文档）

可以看到uni.uploadfile是一个post请求，还需要规定请求头content-type 为 multipart/form-data
代码如下

//图片上传
uni.uploadfile({
    url:'接口路径',
    filePath:'要上传文件资源的路径。',
    name:'multipart 提交时，表单的项目名，默认为 file',
    header:{
        "Content-Type": "multipart/form-data" //一定要写的
    },
    formData:{
        ...data  //网络请求中其他额外的data
    },
    success(res){
        console.log(res)
    },
    fail(err){
        console.log(err)
    },
    complete(){}
})

//用uni.request来做个对比
uni.request({
    url:'',
    method:'',
    data:{
        ...data
    },
    header:{
        "Content-Type": "application/json"
    },
    success(res){
        console.log(res)
    },
    fail(err){
        console.log(err)
    },
    complete(){}
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

可以看到这两个api在配置信息上面差距不是很大，需要注意的只有以下几点：

1.名字需要更换

2.正常的接口请求参数是在data中，图片上传参数在fromData中

3.图片上传还增加了两个参数filePath和name

4.图片上传的请求头需要添加content-type 为 multipart/form-data

当然怎么获取文件uniapp官方也有对应的api，如下：

获取本地图片

uni.chooseImage(OBJECT)

从本地相册选择图片或使用相机拍照。

uni.chooseImage({
	count: 6, //默认9
	sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
	sourceType: ['album'], //从相册选择
	success: function (res) {
		console.log(JSON.stringify(res.tempFilePaths));
	}
});
1
2
3
4
5
6
7
8

（这里附上官方链接，可以详细的看一下官方文档是怎么描述的uniapp获取本地图片官方文档）

将以上两种方法结合在一起就可以完整的从获取图片到上传图片了。

uni.chooseImage({
	count: 6, //默认9
	sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
	sourceType: ['album'], //从相册选择
	success: function (res) {
		uni.uploadfile({
                    url:'接口路径',
                    filePath:'要上传文件资源的路径。',
                    name:'multipart 提交时，表单的项目名，默认为 file',
                    header:{
                        "Content-Type": "multipart/form-data" //一定要写的
                    },
                    formData:{
                        ...data  //网络请求中其他额外的data
                    },
                    success(res){
                        console.log(res)
                    },
                    fail(err){
                        console.log(err)
                    },
                    complete(){}
                })
	}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

具体使用是需要封装的这里就不展示请求封装了，方法很多，就不演示了。