经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
【微信小程序云开发】1分钟学会实现上传、下载、预览、删除图片,并且以九宫格展示图片
来源:cnblogs  作者:小秃僧  时间:2022/1/1 1:59:13  对本文有异议

大家好,我叫小秃僧
这篇文章是讲解云开发如何上传、下载、预览、删除图片,并且以九宫格展示图片的功能

@

1、 实现效果

废话少说,先看效果为敬:

在这里插入图片描述

说明:
中间停顿一下是我在选择照片上传。点击右上角的“x”可以删除图片,点击“下载第一张图片”按钮可以下载并打开第一张图片,因为下载download()函数我传入的是第一张图片的云存储的图片地址。

2、JavaScript代码

首先,我们要在页面的data对象里面定义fileList、linshi两个数组

  1. /**
  2. * 页面的初始数据
  3. */
  4. data: {
  5. fileList:[], //存放有图片地址的图片数组
  6. linshi:[], //存放选择的图片的临时数组
  7. },

有很详细的代码注释,很好理解,非常简单。这是上传图片函数的代码

  1. // 上传图片
  2. uploadToCloud() {
  3. let that = this;
  4. wx.chooseImage({
  5. count: 9, //count属性确定最多可以上传9张,下方属性可以看看官方的说明,就不一一说明
  6. sizeType: ['original', 'compressed'],
  7. sourceType: ['album', 'camera'],
  8. success (res) {
  9. wx.showLoading({
  10. title: '正在上传',
  11. })
  12. console.log(res)
  13. //赋值给linshi临时数组暂时存储起来
  14. that.setData({
  15. linshi:that.data.linshi.concat(res.tempFilePaths)
  16. })
  17. console.log(that.data.linshi)
  18. //设置图片存储到云存储的位置和图片名称
  19. let lujin = "img/" + new Date().getTime() +"-"+ Math.floor(Math.random() * 1000);
  20. //这里调用了图片上传函数wx.cloud.uploadFile()
  21. //传给wx.cloud.uploadFile的cloudPath属性的值不能重复!!!巨坑,加个index就可以避免重复了
  22. const uploadTasks = that.data.linshi.map((item, index) => that.uploadFilePromise(index+lujin, item));
  23. //promise.all方法会等待map方法都执行完全后再继续执行then方法里面的代码
  24. Promise.all(uploadTasks)
  25. .then(data => {
  26. console.log(data)
  27. wx.hideLoading()
  28. wx.showToast({
  29. title: '上传成功',
  30. icon: 'none'
  31. });
  32. const newFileList = data.map(item => ({ url: item.fileID,isImage: true,}));
  33. console.log(newFileList)
  34. //每次上传成功后,都要清空一次临时数组,避免第二次重复上传,浪费存储资源,
  35. that.setData({
  36. fileList: that.data.fileList.concat(newFileList),
  37. linshi:[],
  38. });
  39. })
  40. .catch(e => {
  41. wx.showToast({ title: '上传失败', icon: 'none' });
  42. console.log(e);
  43. });
  44. }
  45. })
  46. },
  47. //上传到云存储,并且获得图片地址
  48. uploadFilePromise(fileName, chooseResult) {
  49. return wx.cloud.uploadFile({
  50. cloudPath: fileName,
  51. filePath: chooseResult
  52. });
  53. },

下方是删除函数:

  1. //删除图片
  2. delete:function(event){
  3. let that = this;
  4. console.log(event)
  5. let inde = event.currentTarget.dataset.id
  6. //删除数组里面的值
  7. that.data.fileList.splice(inde,1)
  8. that.setData({
  9. fileList:that.data.fileList,
  10. })
  11. },

下方是预览函数:

  1. //预览图片
  2. previewImage:function(event){
  3. console.log(event)
  4. wx.previewImage({
  5. urls: [event.currentTarget.dataset.url] // 需要预览的图片http链接列表
  6. })
  7. },

你会发现delete函数和previewImage函数都有个接收参数event,delete函数的event是用来接收我们在wxml绑定的id,而id的值就等于图片数组下标index,用于区别删除哪一张图片

预览也是同样的逻辑。previewImage函数的event是用来接收我们在wxml绑定的url,而url的值就等于图片地址url,用于区别预览哪一张图片,并传值给wx.previewImage()方法进行预览即可

点击会触发对应的函数,我们绑定的数据就会传给对应函数的event参数接收。非常简单!

我们在wxml是这样子绑定数据的,如下图:

在这里插入图片描述

id和url可以自定义哈,绑定数据的固定格式是data-xxx

下方是下载函数:

  1. //下载图片
  2. download:function(){
  3. let url = this.data.fileList[0].url;
  4. //下载文件
  5. wx.cloud.downloadFile({
  6. fileID: url,
  7. success: res => {
  8. console.log("文件下载成功",res);
  9. //打开文件
  10. const filePath = res.tempFilePath
  11. wx.showModal({
  12. title: '提示',
  13. content: '下载成功,请打开另存',
  14. showCancel:false,
  15. confirmText:'前往另存',
  16. success (res) {
  17. if (res.confirm) {
  18. console.log('用户点击确定')
  19. wx.openDocument({
  20. filePath: filePath,
  21. success: function (re) {
  22. console.log('文件打开成功',re)
  23. }
  24. })
  25. } else if (res.cancel) {
  26. console.log('用户点击取消')
  27. }
  28. }
  29. })
  30. }
  31. })
  32. },

使用官方给的wx.cloud.downloadFile方法进行下载,因为这个示例我下载的是图片的第一张,所以fileID我们传入的是图片数组的第一张图片的地址。

下载成功后,我们可以使用官方的wx.openDocument方法去打开刚刚下载的图片。

非常简单易懂滴!

3、wxml代码

  1. <view class="des">温馨提示:点击加号图片可以上传图片哦</view>
  2. <view class="img">
  3. <block wx:for="{{ fileList }}" wx:key="index">
  4. <view class="img2">
  5. <view bindtap="delete" data-id="{{index}}">x</view>
  6. <image bindtap="previewImage" data-url="{{item.url}}" src="{{item.url}}"></image>
  7. </view>
  8. </block>
  9. <image wx:if="{{fileList.length<9}}" bindtap="uploadToCloud" style="width: 200rpx;height: 200rpx;" src="/images/jiahao.png"></image>
  10. </view>
  11. <button style="margin: 30rpx 0" type="primary" catchtap="download">下载第一张图片</button>

在wxml里分别绑定了delete()删除函数、previewImage()预览函数、uploadToCloud()上传函数、download()下载函数。点击会分别触发不同的函数,实现对应的功能

4、wxss代码

这个wxss是规定wxml的内容是怎么显示,就是写一些样式,比如图片的宽高要多大等等

  1. .img{
  2. margin-left: 5%;
  3. width: 90%;
  4. display: flex;
  5. flex-direction: row;
  6. flex-wrap: wrap;
  7. }
  8. .img2{
  9. width: 210rpx;
  10. height: 210rpx;
  11. }
  12. .img2 view{
  13. color: red;
  14. z-index: 5;
  15. position: relative;
  16. width: 20rpx;
  17. height: 20rpx;
  18. margin-top:0rpx;
  19. margin-left: 90%;
  20. }
  21. .img2 image{
  22. width: 190rpx;
  23. height: 190rpx;
  24. position: relative;
  25. z-index: 5;
  26. }
  27. .des {
  28. padding-left: 40rpx;
  29. padding-top: 20rpx;
  30. font-size: 26rpx;
  31. color: #acacac;
  32. letter-spacing: 2rpx;
  33. line-height: 42rpx;
  34. }

到这里就完成了,有详细的代码注释,是不是非常简单

需要源码可以点击这里

学到的童鞋,一键三连为敬!感激不尽....哈哈哈,欢迎关注小秃僧!
end
专注前端开发,擅长微信小程序开发。欢迎关注微信公众号:小秃僧

原文链接:http://www.cnblogs.com/xue-zhang/p/15754709.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号