上传图片
<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) }) }