upload picture
uni.uploadFile(OBJECT)
Upload local resources to the developer server, and the client initiates a POST request, where content-type is multipart/form-data.
(Attached here is the official link, you can take a detailed look at how the official document describes ituniapp file upload official document)
You can see thatuni.uploadfile is a post request, and the request header content-type needs to be specified as < a i=4> The code is as followsmultipart/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(){
}
})
It can be seen that the difference in configuration information between the two APIs is not very big. The only things that need attention are the following points:
1. The name needs to be changed
2. The normal interface request parameters are in data, and the image upload parameters are in fromData
3. Image upload also adds two parametersfilePath and name
4. The request header for image upload needs to be addedcontent-type as multipart/form-data
Of course, how to obtain the file uniapp official also has a corresponding API, as follows:
Get local pictures
uni.chooseImage(OBJECT)
Select a picture from your local photo album or take a photo with your camera.
uni.chooseImage({
count: 6, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
sourceType: ['album'], //从相册选择
success: function (res) {
console.log(JSON.stringify(res.tempFilePaths));
}
});
(The official link is attached here, you can take a detailed look at how the official document describes ituniapp obtains local image official document) a>
Combining the above two methods can complete the process from obtaining pictures to uploading pictures.
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(){
}
})
}
})
The specific use requires encapsulation, and request encapsulation will not be shown here. There are many methods, so I will not demonstrate them.