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)
				        },
				      })
			}
}

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐