uniapp小程序---图片上传

图片上传

uni.uploadFile(OBJECT)

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

在这里插入图片描述

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

可以看到uni.uploadfile是一个post请求,还需要规定请求头content-typemultipart/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(){
    
    }
})

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

1.名字需要更换

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

3.图片上传还增加了两个参数filePathname

4.图片上传的请求头需要添加content-typemultipart/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));
	}
});

(这里附上官方链接,可以详细的看一下官方文档是怎么描述的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(){
    
    }
                })
	}
})

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

猜你喜欢

转载自blog.csdn.net/WDJ_webDeveloper/article/details/132667522