本文介绍在UniApp开发中，如何通过uni-file-picker组件结合图片覆盖技术，实现完全自定义样式的文件上传功能。重点解析利用CSS opacity属性隐藏原生组件，并通过覆盖层实现上传前预览与上传后状态展示的具体代码实现。
在UniApp项目中，可以使用uni-file-picker组件来实现文件选择与上传功能。以下为基础代码示例：
<uni-file-picker
@select="onFileSelected"
@cancel="onFilePickerCancel"
limit="1"
class="weightPage-upload-but"
file-mediatype="image"
></uni-file-picker>
<image
class="weightPage-item-upload-img"
v-if="weightData.img_url"
:src="weightData.img_url"
mode=""
>
</image>
<image
class="weightPage-item-upload-img"
v-else
src="@/static/checkDetails/upload.png"
mode=""
>
</image>通过添加一个image组件覆盖在上传按钮上，可以实现完全自定义的上传样式（也可以使用其他组件进行覆盖）。上传前的界面状态如下：
上传完成后的界面状态如下：
具体功能实现逻辑如下：
data() {
return {
weightData: {
img_url: "",
},
};
},
methods: {
onFileSelected(e) {
// 获取选中的文件路径
const filePath = e.tempFiles[0].url;
console.log(filePath);
// 调用上传图片的方法
this.uploadImage(filePath);
},
async uploadImage(filePath) {
try {
let formData = new FormData();
formData.append("file", {
url: filePath,
name: "image.jpg",
type: "image/jpeg",
});
// 转换为普通 Object
const formDataObj = {};
for (let [key, value] of formData.entries()) {
formDataObj[key] = value;
}
/*#ifdef MP-WEIXIN*/
// 从微信小程序的本地缓存中取出 token
let wxToken = wx.getStorageSync("token");
let wxbaseURL = wx.getStorageSync("baseURL");
// 检查是否成功获取到值
if (wxToken) {
uni.uploadFile({
url: `${wxbaseURL}...`, //需要传图片的后台接口
filePath: filePath, // 上传图片 通过uni-app的uni-file-picker组件 函数返回
name: "image", //文件名字
header: {
Authorization: "Bearer " + wxToken,
},
formData: formDataObj,
success: (res) => {
const { data } = JSON.parse(res.data);
console.log(data);
this.weightData.img_url = data.url;
uni.showToast({
title: "图片上传成功",
icon: "success",
duration: 2000, // 提示持续时间，单位为毫秒
});
},
fail: (e) => {
console.log(e);
},
});
}
/*#endif*/
/*#ifdef H5*/
let Token = localStorage.getItem("token");
let baseURL = localStorage.getItem("baseURL");
// 检查是否成功获取到值
if (Token) {
uni.uploadFile({
url: `${baseURL}...`, //需要传图片的后台接口
filePath: filePath, // 上传图片 通过uni-app的uni-file-picker组件 函数返回
name: "image", //文件名字
header: {
Authorization: "Bearer " + Token,
},
formData: formDataObj,
success: (res) => {
console.log(JSON.parse(res.data));
const { data } = JSON.parse(res.data);
console.log(data);
this.weightData.img_url = data.url;
uni.showToast({
title: "图片上传成功",
icon: "success",
duration: 2000, // 提示持续时间，单位为毫秒
});
},
fail: (e) => {
console.log(e);
},
});
}
/*#endif*/
// 可以添加上传进度监听等额外逻辑
} catch (error) {
console.error("上传图片时发生错误", error);
}
},
onFilePickerCancel() {
console.log("取消选择");
// 可以在这里处理取消选择的逻辑
},
},相关的CSS样式代码如下：
隐藏原生上传样式的核心在于设置 opacity: 0;属性，使组件不可见但保持可交互。
.weightPage-upload-but {
position: absolute;
width: 279px;
height: 100px;
z-index: 1;
left: 0px;
opacity: 0;
padding: 10px;
}
.weightPage-item-upload-img {
width: 80px;
height: 78px;
border-radius: 10px;
}
.weightPage-item-upload-text {
font-size: 12px;
font-weight: 500;
line-height: 19px;
color: rgba(153, 153, 153, 1);
flex: 1;
padding: 10px;
}至此，关于在UniApp中使用uni-file-picker实现自定义上传功能的介绍已结束。如需了解更多uni-file-picker上传相关内容，请搜索本站历史文章或继续浏览后续文章，感谢支持。