uniapp实现图片上传以及图片分享功能
1.在wxml文件中添加一个按钮和一个image标签用于显示上传的图片2.在js文件中添加选择图片和上传图片的方法。
·
1.图片上传
1.在文件中添加一个按钮和一个image标签用于显示上传的图片
<view>
<button type="primary" @click="handleChooseImage()">点击上传</button>
</view>
2.在js文件中添加选择图片和上传图片的方法
methods: {
handleChooseImage() {
uni.chooseImage({
count: 1,
sourceType: ['album'],
success: res => {
this.filePath = res.tempFilePaths[0]; //获取图片本地路径
this.handleUploadFile('/upload', this.filePath);
// 上传图片
//console.log(this.filePath)
}
});
},
handleUploadFile(url, filePath, data) {
uni.uploadFile({
url: "https://xxx/api/CertInfo/UpLoadPic",//接收图片的接口路径
filePath,
header: {
"authorization": uni.getStorageSync('token'), //个人所需的权限设置
},
name: 'file',
formData: {
//要上传的文件
file: filePath
},
success: (uploadFileRes) => {
this.ab = JSON.parse(uploadFileRes.data)
console.log("图片路径地址1111111111", this.ab.data)
uni.showToast({
icon: "success",
title: "上传成功"
})
},
fail: (res) => {
console.log(res, '上传失败')
}
})
},
}
2.图片分享
1.在文件中添加一个按钮
<view class="">
<button @click="FenXiang()">点击分享</button>
</view>
2.在js文件中添加分享图片的方法
data() {
return {
str:"www.xxxxxxx.com",//图片路径
}
},
methods: {
FenXiang(){
let _this = this
console.log('分享图片路径url',_this.str)
wx.downloadFile({
url:_this.str,
success: res => {
wx.showShareImageMenu({
path: res.tempFilePath,
})
console.log(res.tempFilePath)
},
fail: err => {
console.log('错误信息', err)
},
})
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)