上传图片

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