Uploader

图片上传

图片上传

图片上传的实现主要使用了微信原生API wx.chooseImage(OBJECT)

  1. <template>
  2. <divclass="page">
  3. <divclass="weui-uploader__bd">
  4. <divclass="weui-uploader__files"id="uploaderFiles">
  5. <blockv-for="item in files" :key="index">
  6. <divclass="weui-uploader__file" @click="predivImage" :id="item">
  7. <imageclass="weui-uploader__img" :src="item"mode="aspectFill"/>
  8. </div>
  9. </block>
  10. </div>
  11. <divclass="weui-uploader__input-box">
  12. <divclass="weui-uploader__input" @click="chooseImage"></div>
  13. </div>
  14. </div>
  15. </div>
  16. </div>
  17. </template>
  18. <script>
  19. exportdefault{
  20. data(){
  21. return{
  22. files:[]
  23. }
  24. },
  25. methods:{
  26. chooseImage(e){
  27. var _this =this;
  28. wx.chooseImage({
  29. sizeType:['original','compressed'],// 可以指定是原图还是压缩图,默认二者都有
  30. sourceType:['album','camera'],// 可以指定来源是相册还是相机,默认二者都有
  31. success:function(res){
  32. // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
  33. _this.files = _this.files.concat(res.tempFilePaths)
  34. },
  35. fail:function(){
  36. console.log('fail');
  37. },
  38. complete:function(){
  39. console.log('commplete');
  40. }
  41. })
  42. },
  43. predivImage(e){
  44. console.log(e);
  45. wx.previewImage({
  46. current: e.currentTarget.id,// 当前显示图片的http链接
  47. urls:this.files // 需要预览的图片http链接列表
  48. })
  49. }
  50. }
  51. }
  52. </script>
  53. <style>
  54. </style>

效果

uploader01

图片预览

图片预览的实现主要使用了微信原生API wx.previewImage(OBJECT)

  1. <script>
  2. exportdefault{
  3. data(){
  4. return{
  5. files:[]
  6. }
  7. },
  8. methods:{
  9. predivImage(e){
  10. console.log(e);
  11. wx.previewImage({
  12. current: e.currentTarget.id,// 当前显示图片的http链接
  13. urls:this.files // 需要预览的图片http链接列表
  14. })
  15. }
  16. }
  17. }
  18. </script>

效果

uploader02