导文
uniapp写上传|微信小程序上传+微信h5上传
上传图片
<uni-file-picker
@select="onFileSelected"
@cancel="onFilePickerCancel"
limit="1"
class="weightPage-upload-but"
file-mediatype="image"
></uni-file-picker>
是使用 <uni-file-picker> 组件，用于实现文件选择的功能：
<uni-file-picker>: 这是一个自定义的文件选择器组件。可能是由你的项目或者某个前端框架提供的，其作用是为用户提供一个界面来选择文件。@select="onFileSelected": 这是一个事件监听器，当用户选择文件后，会调用onFileSelected方法（或者事件处理函数）。在这个函数中，你可以处理用户选择的文件，比如上传到服务器或者展示在界面上。@cancel="onFilePickerCancel": 这是另一个事件监听器，当用户取消文件选择时，会调用onFilePickerCancel方法（或者事件处理函数）。这个函数可以处理用户取消选择文件的情况，可能是清除界面上的选择或者显示一些提示信息。limit="1": 这个属性指定了用户可以选择的文件数量的限制，这里限制为最多选择一个文件。file-mediatype="image": 这是一个自定义属性，用来指定允许选择的文件类型。在这个例子中，只允许选择图片文件。这种限制可以在前端帮助用户选择正确类型的文件，避免不必要的错误。
微信小程序
/*#ifdef MP-WEIXIN*/
// 从微信小程序的本地缓存中取出 token
let wxToken = wx.getStorageSync("token");
let wxbaseURL = wx.getStorageSync("baseURL");
console.log(wxToken, "wxToken");
// 检查是否成功获取到值
if (wxToken) {
console.log(wxToken, "wxToken");
uni.uploadFile({
url: `${
wxbaseURL}/mini/upload/image`, //需要传图片的后台接口
filePath: filePath, // 上传图片 通过uni-app的uni-file-picker组件 函数返回
name: "image", //文件名字
header: {
Authorization: "Bearer " + wxToken,
},
// formData: formData,
formData: {
type: Object,
default() {
return {
url: filePath,
name: "image.jpg",
type: "image/jpeg",
};
},
},
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*/
微信h5上传
/*#ifdef H5*/
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;
}
let Token = localStorage.getItem("token");
let baseURL = localStorage.getItem("baseURL");
// 检查是否成功获取到值
if (Token) {
uni.uploadFile({
url: `${
baseURL}/mini/upload/image`, //需要传图片的后台接口
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*/
总代码展示
<template>
<view class="weightPage">
<view class="weightPage-item-upload">
<view class="weightPage-upload-but">
<uni-file-picker
@select="onFileSelected"
@cancel="onFilePickerCancel"
limit="1"
class="weightPage-upload-but"
file-mediatype="image"
></uni-file-picker>
</view>
<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>
</view>
</view>
</template>
<script>
export default {
data() {
return {
weightData: {
img_url: "",
},
};
},
methods: {
handerUnit(item) {
this.unit = item;
console.log(item);
},
onFileSelected(e) {
// 获取选中的文件路径
const filePath = e.tempFiles[0].url;
console.log(filePath);
// 调用上传图片的方法
this.uploadImage(filePath);
},
async uploadImage(filePath) {
try {
// 上传图片的API地址
console.log(filePath, "filePath");
/*#ifdef MP-WEIXIN*/
// 从微信小程序的本地缓存中取出 token
let wxToken = wx.getStorageSync("token");
let wxbaseURL = wx.getStorageSync("baseURL");
console.log(wxToken, "wxToken");
// 检查是否成功获取到值
if (wxToken) {
console.log(wxToken, "wxToken");
uni.uploadFile({
url: `${
wxbaseURL}/mini/upload/image`, //需要传图片的后台接口
filePath: filePath, // 上传图片 通过uni-app的uni-file-picker组件 函数返回
name: "image", //文件名字
header: {
Authorization: "Bearer " + wxToken,
},
// formData: formData,
formData: {
type: Object,
default() {
return {
url: filePath,
name: "image.jpg",
type: "image/jpeg",
};
},
},
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 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;
}
let Token = localStorage.getItem("token");
let baseURL = localStorage.getItem("baseURL");
// 检查是否成功获取到值
if (Token) {
uni.uploadFile({
url: `${
baseURL}/mini/upload/image`, //需要传图片的后台接口
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);
}
},
},
};
</script>
您好，我是肥晨。
欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。
