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 安全
【前端相关】elementui使用el-upload组件实现自定义上传
【前端相关】elementui使用el-upload组件实现自定义上传
917 0
|
前端开发
react-antd中使用Upload实现图片裁剪-上传-预览的功能
使用react中antd实现图片的上传裁剪和预览,记录一下实现过程,希望能对大家有帮助
1044 0
|
存储 缓存 前端开发
Antd Upload + React-Cropper 实现图片自定义区域剪裁并上传功能
通过Upload组件结合react-Cropper实现图片的裁剪上传组件封装,剖析antd-img-crop源码实现的逻辑,对自己封装的组件进行进一步优化,改造!
4699 0
Antd Upload + React-Cropper 实现图片自定义区域剪裁并上传功能
|
前端开发
Vue3 element-ui el-upload(上传组件) 上传图片后,隐藏上传按钮
Vue3 element-ui el-upload(上传组件) 上传图片后,隐藏上传按钮
500 0
|
5月前
|
存储
uniapp实战 -- 个人信息维护(含选择图片 uni.chooseMedia,上传文件 uni.uploadFile,获取和更新表单数据)
uniapp实战 -- 个人信息维护(含选择图片 uni.chooseMedia,上传文件 uni.uploadFile,获取和更新表单数据)
194 2
|
6月前
|
JavaScript
|
前端开发 JavaScript
vue实现页面截图、保存图片功能
vue实现页面截图、保存图片功能
748 1
|
JavaScript 前端开发
Vue3里如何上传图片以及图片回显
Vue3里如何上传图片以及图片回显
366 0
|
7月前
|
移动开发 JavaScript 小程序
uView Upload 上传
uView Upload 上传
79 0
|
7月前
|
JavaScript 前端开发
js的input标签上传图片并转为base64预览
js的input标签上传图片并转为base64预览
128 0