taro.chooseImage上传图片后删除
时间: 2024-06-17 22:05:44 浏览: 126
taro.chooseImage是Taro框架提供的上传图片的API,而删除图片则需要结合具体的业务逻辑进行处理。一种常见的做法是在上传图片时将返回的图片url保存在一个数组中,然后在删除图片时根据图片url找到对应的数组下标并将其从数组中删除即可。当然,具体实现还需要考虑一些细节问题,例如如何防止多个用户同时操作导致数组越界等问题。
相关问题
下面这段代码,在微信小程序中存在哪些问题,请分析指出,并把修复后的代码发给我。addPic: function () { const _ = this; const { quality } = this.state Taro.chooseImage({ count: 1, sizeType: ['original', 'compressed'], sourceType: ['album'], success(result) { const tempFilePath = result.tempFilePaths[0]; let size = result.tempFiles[0].size; if (size > 1024 * 1024 * 8) {//大于8M返回 return Taro.showToast({ title: '图片大于8M啦', icon: 'none' }) } if (size < 1024 * 800) { //小于800kb压缩 const status = await _.imgSecCheck(tempFilePath) if (status == true) { console.log('通过了处理'); //走检测通过处理 } } else { Taro.getImageInfo({ src: tempFilePath, success: function (res) { _.setState({//设置原始宽高 cWidth: res.width, cHeight: res.height }, async () => { try { const imagePath = await _.getCanvasImg(tempFilePath, res.width, res.height, quality); const status = await _.imgSecCheck(imagePath) if (status == true) { console.log('通过了处理'); //走检测通过处理 } } catch (error) { } }) } }) } } }) },
在微信小程序中,下面这段代码存在以下问题:
1. `const status = await _.imgSecCheck(tempFilePath)` 语句中没有使用 `async` 函数,无法使用 `await` 关键字,应该将该函数改为 `async` 函数。
2. `await` 关键字只能在 `async` 函数中使用,因此需要将 `success` 回调函数改为 `async` 函数。
3. `success` 回调函数中的 `_.setState` 函数在微信小程序中应该使用 `this.setData` 函数进行替换。
4. `Taro.getImageInfo` 函数在微信小程序中应该使用 `wx.getImageInfo` 函数进行替换。
下面是修复后的代码:
```
addPic: function () {
const _ = this;
const { quality } = this.state
Taro.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album'],
success: async function(result) {
const tempFilePath = result.tempFilePaths[0];
let size = result.tempFiles[0].size;
if (size > 1024 * 1024 * 8) {
//大于8M返回
return Taro.showToast({
title: '图片大于8M啦',
icon: 'none'
})
}
if (size < 1024 * 800) {
//小于800kb压缩
const status = await _.imgSecCheck(tempFilePath)
if (status == true) {
console.log('通过了处理');
//走检测通过处理
}
} else {
wx.getImageInfo({
src: tempFilePath,
success: async function(res) {
_.setData({
//设置原始宽高
cWidth: res.width,
cHeight: res.height
})
try {
const imagePath = await _.getCanvasImg(tempFilePath, res.width, res.height, quality);
const status = await _.imgSecCheck(imagePath)
if (status == true) {
console.log('通过了处理');
//走检测通过处理
}
} catch (error) {
}
}
})
}
}
})
},
```
Taro.canvasToTempFilePath和 Taro.showShareImageMenu实现分享图片功能的具体代码
以下是使用 Taro.js 实现分享图片功能的具体代码:
```jsx
import Taro from '@tarojs/taro'
import { Canvas, View } from '@tarojs/components'
class ShareImage extends Taro.Component {
state = {
canvasImage: ''
}
// 获取海报图片
getPoster = async () => {
const ctx = Taro.createCanvasContext('canvas', this.$scope)
// 在 canvas 上绘制需要分享的图片
// ...
// 将 canvas 转换为临时文件路径
const res = await Taro.canvasToTempFilePath({
canvasId: 'canvas',
quality: 1
}, this.$scope)
return res.tempFilePath
}
// 显示分享菜单
showShareMenu = async () => {
// 获取海报图片
const tempFilePath = await this.getPoster()
// 显示分享菜单
Taro.showShareImageMenu({
imageUrl: tempFilePath,
success: () => {
console.log('分享成功')
},
fail: () => {
console.log('分享失败')
}
})
}
render() {
return (
<View>
<Canvas canvasId='canvas' />
<Button onClick={this.showShareMenu}>分享图片</Button>
</View>
)
}
}
export default ShareImage
```
注意:`canvasToTempFilePath` 方法需要在 `canvas` 组件渲染完成后才能调用,所以需要使用 `this.$scope` 进行传参。
阅读全文