我要评论html代码
<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实现上传功能的文章就介绍到这了,更多相关uniapp uni-file-picker上传内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论