在vue3+setup+ts语法糖中在uniapp上传照片并删除
时间: 2024-05-01 09:24:07 浏览: 141
在vue3+ts+setup语法糖中使用图片预览组件
可以使用uni-app官方提供的uni.uploadFile API上传图片,同时可以使用uni.request API发送请求删除图片。
在Vue3的setup函数中,可以这样写:
```typescript
import { ref } from 'vue'
import { uni } from 'uni-core'
export default {
setup() {
const imageList = ref<string[]>([]) // 存放上传成功后的图片路径列表
const uploadImage = async () => {
const [error, res] = await uni.chooseImage({ count: 1 })
if (error) {
console.error(error)
return
}
const [uploadError, uploadRes] = await uni.uploadFile({
url: 'your_upload_api',
filePath: res.tempFilePaths[0],
name: 'file',
})
if (uploadError) {
console.error(uploadError)
return
}
const { data } = uploadRes
if (data.code === 0 && data.data) {
imageList.value.push(data.data.url)
}
}
const removeImage = async (index: number) => {
const [error, res] = await uni.request({
url: 'your_delete_api',
method: 'POST',
data: { url: imageList.value[index] },
})
if (error) {
console.error(error)
return
}
const { data } = res
if (data.code === 0 && data.data) {
imageList.value.splice(index, 1)
}
}
return {
imageList,
uploadImage,
removeImage,
}
},
}
```
其中,`imageList`是一个`ref`类型的变量,用于存放上传成功后的图片路径列表。`uploadImage`函数用于选择并上传图片,上传成功后将图片路径添加到`imageList`中。`removeImage`函数用于删除指定下标的图片,删除成功后从`imageList`中移除对应的图片路径。
需要注意的是,上传和删除图片的API需要自己实现。在上传图片的返回数据中,需要包含上传成功后的图片路径。在删除图片的请求中,需要包含要删除的图片路径信息。
阅读全文