选择图片

将图片视频等文件上传到uniCloud里面
上传到这里，方便项目的使用
image.png
使用uni-app图片选择的一个api
image.png

  1. uni.chooseFile({
  3.                 })

count为1选择一张图片
image.png
成功和失败的回调
image.png

  1. uni.chooseImage({
  2.                     count:1,
  3.                     success(res) {
  4.                         console.log(res)
  5.                     },
  6.                     fail(err) {
  7.                         console.log(err)
  8.                     }
  9.                 })

点击选择图片
image.png
成功的信息
image.png
打印图片的地址
image.png

image.png
会输出图片的路径，我们需要用到这个地址上传到云存储中。
image.png

上传

image.png

image.png

  1. uni.chooseImage({
  2.                     count:1,
  3.                     success(res) {
  4.                         const tempFilePath = res.tempFilePaths[0];
  5.                         console.log(tempFilePath)
  6.                         uniCloud.uploadFile({
  7.                             filePath:tempFilePath,
  8.                             success(res) {
  9.                                 console.log(res)
  10.                             },fail(err) {
  11.                                 console.log(err)
  12.                             }
  13.                         })
  14.                     },
  15.                     fail(err) {
  16.                         console.log(err)
  17.                     }
  18.                 })

选择图片
image.png

image.png

CloudPath不合法

https://uniapp.dcloud.io/uniCloud/storage.html#%E5%AE%A2%E6%88%B7%E7%AB%AFapi
image.png
解决方法参考
https://www.cnblogs.com/xuan99/p/15449312.html
cloudPath为文件名称

image.png

上传后的图片显示在页面中

把src改成变量
image.png

  1. <image class="logo" :src="src"></image>

在data中声明，初始值为空
image.png
上传成功后的赋值
image.png

image.png
图片没有显示成功
image.png
这里的success是function的形式，当前的this指向是错误的
image.png
在上面声明self等于this对象
image.png
然后这里改成self
image.png
再执行一次
image.png

  1. let self=this;
  2.                 uni.chooseImage({
  3.                     count:1,
  4.                     success(res) {
  5.                         console.log('文件参数：',res)
  6.                         const tempFilePath = res.tempFilePaths[0];
  7.                         console.log(tempFilePath)
  8.                         uniCloud.uploadFile({
  9.                             filePath:tempFilePath,
  10.                             cloudPath:res.tempFiles[0].name,
  11.                             success(res) {
  12.                                 console.log(res)
  13.                                 self.src=res.fileID
  14.                             },fail(err) {
  15.                                 console.log(err)
  16.                             }
  17.                         })
  18.                     },
  19.                     fail(err) {
  20.                         console.log(err)
  21.                     }
  22.                 })

image.png
这里是阿里SDK的bug，可以先不用管。
image.png

删除图片

复制图片的路径。
image.png
image.png
打印成功和失败
image.png
image.png
刷新控制台，图片已经消失了。
image.png

结束