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

目录
相关文章
|
12月前
|
前端开发 JavaScript 安全
【前端相关】elementui使用el-upload组件实现自定义上传
【前端相关】elementui使用el-upload组件实现自定义上传
634 0
vue3 wangEditor富文本自定义上传本地图片
Vue3和WangEditor都提供了上传本地图片的功能,可以结合使用实现自定义上传本地图片。
1080 0
|
前端开发
react-antd中使用Upload实现图片裁剪-上传-预览的功能
使用react中antd实现图片的上传裁剪和预览,记录一下实现过程,希望能对大家有帮助
940 0
react-antd中使用Upload实现图片裁剪-上传-预览的功能
|
存储 缓存 前端开发
Antd Upload + React-Cropper 实现图片自定义区域剪裁并上传功能
通过Upload组件结合react-Cropper实现图片的裁剪上传组件封装,剖析antd-img-crop源码实现的逻辑,对自己封装的组件进行进一步优化,改造!
4495 0
Antd Upload + React-Cropper 实现图片自定义区域剪裁并上传功能
|
前端开发
Vue3 element-ui el-upload(上传组件) 上传图片后,隐藏上传按钮
Vue3 element-ui el-upload(上传组件) 上传图片后,隐藏上传按钮
412 0
|
3月前
|
存储
uniapp实战 -- 个人信息维护(含选择图片 uni.chooseMedia,上传文件 uni.uploadFile,获取和更新表单数据)
uniapp实战 -- 个人信息维护(含选择图片 uni.chooseMedia,上传文件 uni.uploadFile,获取和更新表单数据)
94 2
|
5月前
|
前端开发
elementui_上传组件方法自定义(formData)
elementui_上传组件方法自定义(formData)
39 1
|
5月前
|
小程序 JavaScript
在使用微信小程序开发中用vant2框架中的Uploader 文件上传wx.uploadFile无反应和使用多图上传
网上有的说是bind:after-read="afterRead"的命名问题不支持-,但是我这儿执行了console.log("file",file);证明函数运行了。后来发现是multiple="true"原因开启了多图上传,如果是多图上传的话file就是数组了
286 2
|
5月前
|
移动开发 JavaScript 小程序
uView Upload 上传
uView Upload 上传
55 0
|
JavaScript
vsCode编辑器Vue使用el-upload上传组件标签名变成上传图标
vsCode编辑器Vue使用el-upload上传组件标签名变成上传图标
240 0