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

目录
相关文章
vue3 wangEditor富文本自定义上传本地图片
Vue3和WangEditor都提供了上传本地图片的功能,可以结合使用实现自定义上传本地图片。
1365 0
|
前端开发
react-antd中使用Upload实现图片裁剪-上传-预览的功能
使用react中antd实现图片的上传裁剪和预览,记录一下实现过程,希望能对大家有帮助
1072 0
|
前端开发
Vue3 element-ui el-upload(上传组件) 上传图片后,隐藏上传按钮
Vue3 element-ui el-upload(上传组件) 上传图片后,隐藏上传按钮
541 0
|
4月前
|
移动开发 小程序
UniApp+uView实现图片上传返回Base64
UniApp+uView实现图片上传返回Base64
157 0
|
JavaScript 前端开发
Vue3里如何上传图片以及图片回显
Vue3里如何上传图片以及图片回显
397 0
|
9月前
|
移动开发 JavaScript 小程序
uView Upload 上传
uView Upload 上传
120 0
|
9月前
|
JavaScript 前端开发
js的input标签上传图片并转为base64预览
js的input标签上传图片并转为base64预览
143 0
|
JavaScript 前端开发
vue-element-admin上传图片的功能,限制图片大小-:before-upload="handleImagesUrlBefore"
vue-element-admin上传图片的功能,限制图片大小-:before-upload="handleImagesUrlBefore"
107 0
|
JavaScript
Vue Antdv 上传组件(a-upload、a-upload-dragger)二次封装(DZMAntdvUpload)
Vue Antdv 上传组件(a-upload、a-upload-dragger)二次封装(DZMAntdvUpload)
1322 0
|
JavaScript 前端开发
vue3上传图片(组件上传)
vue3上传图片(组件上传)
513 0

热门文章

最新文章