介绍
在 UniApp 开发中,我们常常会碰到需要实现文件上传的需求。而 uni.uploadFile
是 UniApp 提供的一个用于文件上传的 API。然而,在使用这个 API 过程中,我们可能会遇到一些坑,本文将介绍一些在使用 uni.uploadFile
过程中需要注意的问题,并给出相应的解决方案。
坑一:文件路径问题
在使用 uni.uploadFile
上传文件时,我们需要指定文件的相对路径。然而,我们无法直接获取文件的相对路径,这也就导致了我们无法直接使用 uni.uploadFile
上传文件。
解决方案
我们可以通过调用 uni.chooseImage
接口选择图片,并将选择的图片存储到指定目录下,然后再使用 uni.uploadFile
将该图片上传。
uni.chooseImage({
count: 1,
success: function (res) {
var tempFilePaths = res.tempFilePaths;
var filePath = tempFilePaths[0];
var fileName = 'myImage.jpg';
var uploadUrl = 'https://example.com/upload';
uni.saveFile({
tempFilePath: filePath,
success: function (res) {
var savedFilePath = res.savedFilePath;
uni.uploadFile({
url: uploadUrl,
filePath: savedFilePath,
name: 'file',
formData: {
'fileName': fileName
},
success: function (res) {
console.log('upload success');
},
fail: function (res) {
console.log('upload fail');
}
});
}
});
}
});
如上所示,在成功选择图片后,我们先使用 uni.saveFile
将图片保存到特定目录下,然后再使用 uni.uploadFile
将该图片上传。
坑二:上传文件格式问题
在使用 uni.uploadFile
上传文件时,我们需要指定文件的格式。然而,如果文件格式不正确,上传可能会失败。
解决方案
我们可以通过判断文件的格式,来确保上传的文件格式正确。以下是一个示例,演示了如何判断并上传 jpg
格式的文件。
uni.chooseImage({
count: 1,
success: function (res) {
var tempFilePaths = res.tempFilePaths;
var filePath = tempFilePaths[0];
var fileName = 'myImage.jpg';
var uploadUrl = 'https://example.com/upload';
var ext = filePath.substring(filePath.lastIndexOf('.') + 1).toLowerCase();
if (ext != 'jpg') {
console.log('File type not supported');
return;
}
uni.saveFile({
tempFilePath: filePath,
success: function (res) {
var savedFilePath = res.savedFilePath;
uni.uploadFile({
url: uploadUrl,
filePath: savedFilePath,
name: 'file',
formData: {
'fileName': fileName
},
success: function (res) {
console.log('upload success');
},
fail: function (res) {
console.log('upload fail');
}
});
}
});
}
});
如上所示,在选择图片后,我们通过判断文件的后缀名来确保上传的文件格式正确。
坑三:跨域问题
在使用 uni.uploadFile
上传文件时,由于上传操作是跨域的,可能会遇到跨域问题。
解决方案
在遇到跨域问题时,可以通过服务器端进行配置,允许跨域请求。
结论
在 UniApp 中使用 uni.uploadFile
上传文件时,需要注意文件路径、文件格式和跨域问题。通过本文介绍的解决方案,我们可以更好地利用 uni.uploadFile
实现文件上传功能。
希望本文能帮助到大家。谢谢阅读!
本文来自极简博客,作者:心灵捕手,转载请注明原文链接:UniApp 中 uni.uploadFile 文件上传踩坑