uniCloud + uView 上传图片,删除图片(含u-upload 组件的使用)

简介: uniCloud + uView 上传图片,删除图片(含u-upload 组件的使用)

上传图片

<u-upload imageMode='aspectFit' height="250" :maxCount='1' :fileList="fileList" @afterRead="uploadOK" @delete="delPic">
</u-upload>
::v-deep .u-upload__button {
  width: 100% !important;
}

::v-deep .u-upload__wrap__preview__image {
  width: 100% !important;
}

::v-deep .u-upload__wrap__preview {
  width: 100% !important;
}
fileList: [],
 
uploadOK(e) {
  // 避免文件名中有逗号,导致云存储无法删除
  e.file.name = e.file.name.replace(/,/g, '')
  this.fileList = [e.file]
},
delPic() {
  this.fileList = []
},
save() {
  if (this.fileList && this.fileList.length > 0) {
    uniCloud.uploadFile({
        // 将图片存入云存储中 blog 文件夹(没有会自动新建)中,名称为图片原名称
      cloudPath: 'blog/' + this.fileList[0].name,
      filePath: this.fileList[0].url,
      // 将 cloudPath 作为文件路径(可用于自定义文件夹)
      cloudPathAsRealPath: true
    }).then(async (res) => {
      console.log('图片在云存储里的路径为:', res.fileID)
      // 此处省略后续图片云存储地址存入数据库的相关代码
    })
  }
}

删除图片

必须使用云函数

具体实现

新建云函数del_img

exports.main = async (event, context) => {
  let {
    fileList
  } = event
  let result = await uniCloud.deleteFile({
    fileList,
  });
  return result
};

页面中使用云函数

// 删除图片
if (this.detailData.coverImageURL) {
  uniCloud.callFunction({
    name: 'del_img',
    data: {
      fileList: [this.detailData.coverImageURL]
    }
  }).then(res => {
    console.log('删除图片成功-', res)
  })
}

目录
相关文章
|
开发框架 JavaScript 小程序
uni-app——如何阻止事件冒泡
uni-app——如何阻止事件冒泡
580 0
|
JavaScript API 开发者
使用 u-navbar 组件实现页面导航和布局的完全指南
使用 u-navbar 组件实现页面导航和布局的完全指南
2056 0
|
小程序 安全 JavaScript
从零开始uniapp微信小程序项目到发布(超级详细)
最近微信小程序又掀起一波风潮,本文站在新手的角度出发,比较适合第一次使用uniapp 开发微信小程序的伙伴,或者没有过实战经验的小伙伴参考,从零搭建uniapp小程序项目
2677 1
uniapp上传文件时用到的api是什么?格式是什么?
uniapp上传文件时用到的api是什么?格式是什么?
手把手教你将uView UI配置到uniapp项目中
手把手教你将uView UI配置到uniapp项目中
1908 0
手把手教你将uView UI配置到uniapp项目中
|
移动开发 小程序
uniapp自定义tabbar,中间凸起(支持H5、微信小程序)
uniapp自定义tabbar,中间凸起(支持H5、微信小程序)
uniapp自定义tabbar,中间凸起(支持H5、微信小程序)
|
移动开发 小程序 API
uniapp中uview组件库的丰富Upload 上传上午用法
uniapp中uview组件库的丰富Upload 上传上午用法
658 0
|
11月前
|
JavaScript 前端开发 UED
Vue与uni-app开发中通过@font-face巧妙引入自定义字体
Vue与uni-app开发中通过@font-face巧妙引入自定义字体
756 9
|
11月前
|
移动开发 Android开发 容器
uniapp中使用videojs构建H5直播播放器
【10月更文挑战第14天】这两天在开发H5直播带货功能模块,使用原生的video播放器播放不了m3u8的流地址,于是找了videojs,参考了网上的一些资料研究了一下,感觉还不错,videojs播放m3u8流地址还挺稳定的,下面就简单记录一下uniapp里面使用方式
|
JavaScript
uView(u-collapse)折叠 展开 高度问题 无法撑开 nextTick
这段内容是关于一个使用 Vue 的代码示例,涉及`u-collapse`组件的使用问题。代码展示了如何通过`v-for`循环渲染`levelList`和`filmList`数据。当`u-collapse`以手风琴模式运行时,`filmList`的数据加载后未能正确展开。问题在于尽管尝试了官方文档的方法和网络上的其他解决方案,但`filmList`依然无法正常显示。
626 4