官方文档
原理
提示:uniapp不能传file类型的参数,所以需要使用请求体body中的form-data 格式来传递file类型的文件
通过 uni.chooseImage 接口获取图片的临时文件路径,临时文件是blob类型,然后在发送请求前会将blob类型的临时文件tempFilePaths 转为file类型的文件filePath,并指定文件对应的 key 值,后端接收文件的时候可以根据这个 key 获取文件,上传成功后触发 success 回调函数,可以在这里打印上传接口返回的数据。
如何实现
<script>
export default {
data() {
return {
...
}
},
onLoad() {
...
},
methods: {
upload(){
uni.chooseImage({
count: 1, // 图片数量
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], //从相册选择或者拍照
//count sizeType和sourceType为chooseImage的选项,可以省略不写
success: (chooseImageRes) => {
const tempFilePaths = chooseImageRes.tempFilePaths[0];
uni.uploadFile({
url: 'https://www.example.com/upload', //上传图片的接口地址
filePath: tempFilePaths,//要上传的文件路径
name: 'avatar',//文件对应的key值
header: {
'Authorization':'Bearer '+uni.getStorageSync('token'),
} ,
success: (uploadFileRes) => {
console.log(uploadFileRes.data);
},
});
},
});
}
}
}
</script>
实际运用
一般文件上传会封装成方法来简化操作。
单文件
实现了对象名为file,对象值为file类型的单个文件的上传。
export const postUpload = (filePath) => {
console.log(filePath, '调用接口postUpload');
return new Promise((resolve, reject) => {
uni.uploadFile({
url: 'https://www.example.com/upload', //仅为示例,非真实的接口地址
filePath: filePath,
name: 'file',
header: {
'Authorization':'Bearer '+uni.getStorageSync('token'),
},
success: (uploadFileRes) => {
console.log(uploadFileRes);
},
});
});
};
多文件
实现了对象名为file,对象值为filelist的一组文件的上传。
export const postSubmitTask = (id,imagesList) => {
var filelist = [];
for (var i = 0; i < imagesList.length; i++) {
var obj = {};
obj.name = "images";
obj.uri = imagesList[i];
filelist.push(obj)
}
console.log(filelist);
console.log(id,imagesList, '调用接口postSubmitTask');
return new Promise((resolve, reject) => {
uni.uploadFile({
url: 'https://www.example.com/upload', //仅为示例,非真实的接口地址
files:filelist,
formData: {
'taskId':id
},
header: {
'Authorization':'Bearer '+uni.getStorageSync('token'),
},
success: (res) => {
console.log(res.data);
},
});
});
};