先说思路,uni-file-picker 套 uni.uploadFile,uni-file-picker得到文件路径,uni.uploadFile上传
uniapp的uni-file-picker获得文件流的file不是二进制的文件,所以传到后端的数据只有这三个数据
fileType: image
cloudPath: 1712110487286 0.jpg
uuid: 1712110487286
所以联调后端一直出错,根本原因在于uniapp上传图片不能使用这个file,需要在使用 uni.uploadFile 上传,这里面的file才是真正的file
代码:
html5部分:
<uni-file-picker limit="1" fileMediatype="image" @select="select"
></uni-file-picker>
js部分:
const coverPath = ref("");
const select = async (e) => {
// console.log(e.tempFiles[0].file);
let file = e.tempFiles[0];
uni.uploadFile({
url: proxy.Api.ShareuploadFile,
filePath: file.path,
formData: {
'file': 'file'
},
success: (uploadFileRes) => {
let responseData = JSON.parse(uploadFileRes.data);
coverPath.value = responseData.data;
// console.log('保存的文件路径:', savedFilePath);
}
});
};
uni.uploadFile需要文件的路径,刚好uni-file-picker在上传完之后会返回数据,利用路径获取文件流,再上传后端,后端返回的是个对象
最后看效果: