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

目录
相关文章
|
11月前
|
前端开发 JavaScript 安全
【前端相关】elementui使用el-upload组件实现自定义上传
【前端相关】elementui使用el-upload组件实现自定义上传
627 0
vue3 wangEditor富文本自定义上传本地图片
Vue3和WangEditor都提供了上传本地图片的功能,可以结合使用实现自定义上传本地图片。
1074 0
|
前端开发
react-antd中使用Upload实现图片裁剪-上传-预览的功能
使用react中antd实现图片的上传裁剪和预览,记录一下实现过程,希望能对大家有帮助
939 0
react-antd中使用Upload实现图片裁剪-上传-预览的功能
|
存储 缓存 前端开发
Antd Upload + React-Cropper 实现图片自定义区域剪裁并上传功能
通过Upload组件结合react-Cropper实现图片的裁剪上传组件封装,剖析antd-img-crop源码实现的逻辑,对自己封装的组件进行进一步优化,改造!
4489 0
Antd Upload + React-Cropper 实现图片自定义区域剪裁并上传功能
|
1月前
|
前端开发
ElementUI——el-upload上传前校验图片宽高
ElementUI——el-upload上传前校验图片宽高
28 0
|
前端开发
Vue3 element-ui el-upload(上传组件) 上传图片后,隐藏上传按钮
Vue3 element-ui el-upload(上传组件) 上传图片后,隐藏上传按钮
408 0
|
4月前
|
移动开发 JavaScript 小程序
uView Upload 上传
uView Upload 上传
54 0
|
4月前
|
JavaScript 前端开发
js的input标签上传图片并转为base64预览
js的input标签上传图片并转为base64预览
97 0
|
10月前
|
JavaScript 前端开发
vue-element-admin上传图片的功能,限制图片大小-:before-upload="handleImagesUrlBefore"
vue-element-admin上传图片的功能,限制图片大小-:before-upload="handleImagesUrlBefore"
74 0