E运用上传图片

先看效果：

本文主要写js

1、选择图片-----------------------------------------------------------------------

upload:function(){//选择照片
 var that = this;
  dd.chooseImage({
    count: 3,
    success: (res) => {
      that.getImageInfo(res)
    },
    fail:(err)=>{
      if(err.error===11){
        console.log('取消上传')
      }
    }
  });
 },

2、显示图片------------------------------------------------------------------------

 getImageInfo:function(res){//显示图片
  var that = this;
  var paths = that.data.images//符合2:1的留下来
  var errPaths = that.data.errPaths//不符合的放在数组里面
  res.filePaths.map(function(path){
    dd.getImageInfo({
      src:path,
      success:(res)=>{
        if(res.width/res.height===2){
          paths.push({
            "path":path,
            "isSuccess":true
          })
        }else{
          errPaths.push(path)
          paths.push({
            "path":path,
            "isSuccess":false
          })
        }
        that.setData({
          images:paths,
          isupblank:false,
          errPaths:errPaths
        })
      }
    })
  })
 },

3、删除图片功能---------------------------------------------------------------------

deleteImg:function(e){//删除图片
  var that = this;
  var $index = e.target.dataset.index
  dd.showToast({
    type: 'success',
    content: '删除成功',
    duration: 3000,
  });
  that.setData({
    images: that.data.images.filter((item,index) => index !==$index),
    isupblank:false
  })
  if(that.data.images.length===0){
    console.log('没照片')
    this.setData({
      isupblank:true
    })
  }
 },

4、提交表单功能--------------------------------------------------------------

var that =this;
   console.log(that.data.images.length)
   if(that.data.images.length===0){
    dd.showToast({
      type: 'exception',
      content: '请先选择图片！',
      duration: 3000,
    });
   }else{
    console.log(that.data.errPaths.length)
    if(that.data.errPaths.length!==0){
      dd.showToast({
        type: 'exception',
        content: '请先删除不符合规格的图片！',
        duration: 3000,
      });
    }else{
        dd.showLoading({
         content: '提交中...',
        });
     	// 将选择的图片组成一个Promise数组，准备进行并行上传
      const arr = this.data.images.map(item=> {
            return  dd.uploadFile({
			  url: '请使用自己服务器地址',
			  fileType: 'image',
			  fileName: 'file',
			  filePath: item.path,
			})
          })

      // 开始并行上传图片
      Promise.all(arr).then(res => {
        // 上传成功，获取这些图片在服务器上的地址，组成一个数组
        return res.map(item => JSON.parse(item.data).url)
      }).catch(err => {
        console.log(">>>> upload images error:", err)
      }).then(urls => {
        // 调用提交后台的接口
        return dd.httpRequest({
		  url: 'http://httpbin.org/post',
		  method: 'POST',
		  data: {
		    from: '钉钉',
		    production: 'Dingtalk',
		  },
		  dataType: 'json')}
      }).then(res => {
        // 保存问题成功，返回上一页（列表页）
        dd.navigateBack()
      }).catch(err => {
        console.log(">>>> create question error:", err)
      }).then(() => {
        dd.hideLoading()
      })
	}

本文可参考微信小程序上传图片 [https://www.jianshu.com/p/c1e0574ee63d]
有什么不懂得欢迎留言，希望能帮到大家！