nui app sunui-upimg 上传图片，原文件显示问题与压缩问题

vue  nui app   sunui-upimg 上传图片

压缩图片sizeType: ["compressed"],    只有小程序-app才有效果 

 chooseImage() {
      let _self = this;
      uni.chooseImage({
        count: _self.upload_count - _self.upload_before_list.length,
        sizeType: ["compressed"],
        sourceType: ["album", "camera"],
        success:async function (res) {
    
             // #ifdef H5
             await _self.getImageInfo(res,res.tempFilePaths[0]);
            // #endif 
            // #ifdef MP-WEIXIN 
                for (let i = 0, len = res.tempFiles.length; i < len; i++) {
                    res.tempFiles[i]["upload_percent"] = 0;
                    res.tempFiles[i]["path2"] =res.tempFiles[i]["path"];
                    _self.upload_before_list.push(res.tempFiles[i]);
                  }
                
                  _self.upload_cache =res.tempFilePaths;
                  _self.upload(_self.upload_auto);
           // #endif
        },
        fail: function (err) {
          console.log(err);
        },
      });
    },

　　h5  压缩功能问题，h5显示 竖图问题ctx.rotate(270 * Math.PI / 180)

 getImageInfo(res,src) {
        let _self = this
        	let imgSrc = '';
				uni.getImageInfo({
					src,
					success(res2) {
						let canvasWidth = res2.width //图片原始长宽
						let canvasHeight = res2.height
						let img = new Image()
						img.src = res2.path
						let canvas = document.createElement('canvas');
            let ctx = canvas.getContext('2d');    
						canvas.width =canvasWidth/2;
            canvas.height =canvasHeight/2;
            if(canvasHeight>canvasWidth){
            canvas.width = canvasHeight/2;
            canvas.height =canvasWidth/2;

             ctx.rotate(270 * Math.PI / 180);    
            ctx.drawImage(img, -canvasWidth/2, 0, canvasWidth/2, canvasHeight/2);  
            }else
						ctx.drawImage(img, 0, 0, canvasWidth/2, canvasHeight/2);
						canvas.toBlob(function(fileSrc) {
							 imgSrc = window.URL.createObjectURL(fileSrc)
              
         for (let i = 0, len = res.tempFiles.length; i < len; i++) {
            res.tempFiles[i]["upload_percent"] = 0;
            res.tempFiles[i]["path2"] =imgSrc;
            _self.upload_before_list.push(res.tempFiles[i]);
          }
         
          _self.upload_cache =[imgSrc];
          _self.upload(_self.upload_auto);
						})
					}
        })
			},

　　

　

<template>
  <view class="sunui-uploader-bd">
    <view class="sunui-uploader-files">

      <block v-for="(item, index) in upload_before_list" :key="index">
         <!-- :class="[
            item.upload_percent < 100 ? 'sunui-uploader-file-status' : '',
          ]" -->
        <view   v-show="item.path2"
          class="sunui-uploader-file"         
          @click="previewImage(index)"
        >
          <!-- step1.这里修改服务器返回字段 ！！！ -->
          <image
            class="sunui-uploader-img"
            :style="upload_img_wh"
            :src="item.path2"
            mode="aspectFill" 
          />
          <view
            class="sunui-img-removeicon right"
            @click.stop="removeImage(index)"
            v-show="upimg_move"
            >×</view
          >
          <!-- <view class="sunui-loader-filecontent" v-if="item.upload_percent < 100">{{ item.upload_percent }}%</view> -->
        </view>
      </block>
      <view
        v-if="upload_before_list.length==0"
        hover-class="sunui-uploader-hover"
        class="sunui-uploader-inputbox"
        :class="upload_bg_img == 2 ? 'bg2' : ''"
        @click="chooseImage"
        :style="upload_img_wh"
      >
        <view>
          <!-- <text class="iconfont icon-mn_shangchuantupian" style="color: #666;"></text> -->
          <image class="icon-img" src="/static/img/photo.png" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      upload_len: 0,
      upload_cache: [],
      upload_cache_list: [],
      upload_before_list: [],
      upload_before_listsss:[]
    };
  },
  name: "sunui-upimg",
  props: {
    // 服务器url
    url: {
      type: String,
      default:
        "https://a3.dns06.net.cn/app/index.php?i=2&c=entry&a=wxapp&do=Upload_qiniu_b&m=jzwx_a",
    },
    // 上传样式宽高
    upload_img_wh: {
      type: String,
      default: "100%;",
    },
    upload_bg_img: {
      type: String,
      default: "",
    },
    // 上传数量
    upload_count: {
      type: [Number, String],
      default: 1,
    },
    // 是否自动上传? 可以先用变量为false然后再改为true即为手动上传
    upload_auto: {
      type: Boolean,
      default: true,
    },
    // 是否显示删除
    upimg_move: {
      type: Boolean,
      default: true,
    },
    // 服务器预览图片
    upimg_preview: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 服务器返回预览(看服务器卡顿情况设定)
    upimg_delaytime: {
      type: [Number, String],
      default: 300,
    },
    // 请求头信息
    header: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  async created() {
    let _self = this;
    setTimeout(() => {
      this.upload_before_list = this.upload_before_list.concat(
        this.upimg_preview
      );
      this.upload_len = this.upload_before_list.length;
      this.upimg_preview.map((item) => {
        // step2.这里修改服务器返回字段 ！！！
        this.upload_cache_list.push(item.imgUrl.imgUrl);
      });
      this.emit();
    }, this.upimg_delaytime);
  },
  methods: {
    upImage(paths, header) {
      let _self = this;
      const promises = paths.map(function (path) {
        return promisify(upload)({
          url: _self.url,
          path: path,
          name: "file",
          extra: header,
          _self: _self,
        });
      });

      uni.showLoading({
        title: `正在上传...`,
      });
      console.log("upImage-promises",promises)
      Promise.all(promises)
        .then(function (data) {
          uni.hideLoading();
          _self.upload_cache_list.push(...data); 
             console.log("upImage-upload_cache_list",data, _self.upload_cache_list)
             console.log("upImage-upload_before_list", _self.upload_before_list)
             var src=_self.upload_before_list[0].path2;
                 uni.getImageInfo({
                    src,
                    success(res2) {
            console.log('压缩后后后', res2)
              }
          })
             
           _self.emit();
        })
        .catch(function (res) {
          uni.hideLoading();
        });
    },
    chooseImage() {
      let _self = this;
      uni.chooseImage({
        count: _self.upload_count - _self.upload_before_list.length,
        sizeType: ["compressed"],
        sourceType: ["album", "camera"],
        success:async function (res) {
    
             // #ifdef H5
             await _self.getImageInfo(res,res.tempFilePaths[0]);
            // #endif 
            // #ifdef MP-WEIXIN 
                for (let i = 0, len = res.tempFiles.length; i < len; i++) {
                    res.tempFiles[i]["upload_percent"] = 0;
                    res.tempFiles[i]["path2"] =res.tempFiles[i]["path"];
                    _self.upload_before_list.push(res.tempFiles[i]);
                  }
                
                  _self.upload_cache =res.tempFilePaths;
                  _self.upload(_self.upload_auto);
           // #endif
        },
        fail: function (err) {
          console.log(err);
        },
      });
    },
    async upload(upload_auto) {
      let _self = this;
      upload_auto
        ? await _self.upImage(_self.upload_cache, _self.header)
        : console.warn(`传输参数:this.$refs.xx.upload(true)才可上传,默认false`);
    },
    getImageInfo(res,src) {
        let _self = this
            let imgSrc = '';
                uni.getImageInfo({
                    src,
                    success(res2) {
                        let canvasWidth = res2.width //图片原始长宽
                        let canvasHeight = res2.height
                        let img = new Image()
                        img.src = res2.path
                        let canvas = document.createElement('canvas');
            let ctx = canvas.getContext('2d');    
                        canvas.width =canvasWidth/2;
            canvas.height =canvasHeight/2;
            if(canvasHeight>canvasWidth){
            canvas.width = canvasHeight/2;
            canvas.height =canvasWidth/2;

             ctx.rotate(270 * Math.PI / 180);    
            ctx.drawImage(img, -canvasWidth/2, 0, canvasWidth/2, canvasHeight/2);  
            }else
                        ctx.drawImage(img, 0, 0, canvasWidth/2, canvasHeight/2);
                        canvas.toBlob(function(fileSrc) {
                             imgSrc = window.URL.createObjectURL(fileSrc)
              
         for (let i = 0, len = res.tempFiles.length; i < len; i++) {
            res.tempFiles[i]["upload_percent"] = 0;
            res.tempFiles[i]["path2"] =imgSrc;
            _self.upload_before_list.push(res.tempFiles[i]);
          }
         
          _self.upload_cache =[imgSrc];
          _self.upload(_self.upload_auto);
                        })
                    }
        })
            },
    previewImage(idx) {
      let _self = this;
      let preview = [];
      for (let i = 0, len = _self.upload_before_list.length; i < len; i++) {
        // step3.这里修改服务器返回字段 ！！！
      console.log("previewImage-upload_before_list",_self.upload_before_list[i])
        preview.push(_self.upload_before_list[i].path);
      }
      uni.previewImage({
        current: idx,
        urls: preview,
      });
    },
    removeImage(idx) {
      let _self = this;
      _self.upload_before_list.splice(idx, 1);
      _self.upload_cache_list.splice(idx, 1);
      // _self.upload_before_listsss.splice(idx, 1);
      _self.upload_len = _self.upload_before_list.length;
      _self.emit();
    },
    emit() {
      let _self = this;
      _self.$emit("change", _self.upload_cache_list);
    },
  },
};

const promisify = (api) => {
  return function (options, ...params) {
    return new Promise(function (resolve, reject) {
      api(
        Object.assign({}, options, {
          success: resolve,
          fail: reject,
        }),
        ...params
      );
    });
  };
};

const upload = function (options) {
  let url = options.url,
    _self = options._self,
    path = options.path,
    name = options.name,
    // data = options.data,
    extra = options.extra,
    success = options.success,
    progress = options.progress,
    fail = options.fail;

  const uploadTask = uni.uploadFile({
    url: url,
    filePath: path,
    name: name,
    formData: extra,
    success: async function (res) {
      var data = res.data;
      // console.warn(
      //   "sunui-upimg - 如发现没有获取到返回值请到源码191行修改后端返回图片路径以便正常使用插件",
      //   JSON.parse(data)
      // );
      var s = JSON.parse(data);
      if (s.success) {
        // _self.upload_before_list[0].uri= s.data.uri;
        // _self.upload_before_list[0].path= s.data.path;
        // _self.upload_before_list[0].imgUrl= s.data.imgUrl.imgUrl;
          success( s.data);
      } else {
        uni.hideLoading();
        fail(data);
      }
    },
    fail: function (res) {
      if (fail) {
        fail(res);
      }
    },
  });
  uploadTask.onProgressUpdate(async function (res) {
    // for (let i = 0, len = _self.upload_before_list.length; i < len; i++) {
    //   _self.upload_before_list[i]["upload_percent"] = await res.progress;
    // }
    // _self.upload_before_list = _self.upload_before_list;
    _self.upload_len = _self.upload_before_list.length;
  });
};
</script>

<style lang="scss">
@font-face {
  font-family: "iconfont";
  src: url("//at.alicdn.com/iconfont.eot?t=1574391686418");
  /* IE9 */
  src: url("//at.alicdn.com/iconfont.eot?t=1574391686418#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */
      url("data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMkAAsAAAAAB2QAAALYAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqCYIJEATYCJAMICwYABCAFhG0HPRt3BhEVlCNkH4dxmzUXNsJHc1SNfR9KTkCtiXv/l+QDBQSFRBJdKoEsg60HUgCsOpWVnWxNx3BvVITqkj3fepbtzM/OfDo4D86iFEIiJAeX02+Bh/O84TLmsrEnYBxQoHtgm6xACoxTkN0zFsgEdQynCShpq7cwbsK0eTKROSkgbNu8cbUspRFrkoNMkC9ZGYWjcrJkX/IIR/zPhz/6hIxELmWmzdowfp1RvxdbYWm1VrUMCO54JvDrSNEbkTCv1DJDGvp6S5VUX9SRdSUHfi+u1cBZ7R+PQMgzEyugNcU5J67DO9VfJiCigD042iuNQqXSunGRfvrWV6/mvX49/+3bhW/eLHr4puOFtxMfvO5w9tX8yv7rIbf3Rrl84Mbe66XSzWet46nn/etMuALua5LqNZUqpKdfDKjsv2qef+yambJsTWM2zDtKIQ0pS7msvSTUpn1tNyts2xZmWUyw3LI4bPisSZNyOUc2y4/scfZs3QZ1UcgqUWtkVednsvnVs7NOHzmqglXIBnqU7+/M9Hp3y3L2RLWYA9uhlat61/LGGwVqt9Nvafv/8R2fmg/pu7LesH9ZOYL3/6e3P6Z2O0rbIztra+Dtc1u2RY1vapOocEtDiT0Kd1VUUkIN42joS19Fk1s1BVmKy0OioA2kMp1REdcbcsr6QV5mJJT0MnF9mbQRchZiET29CAT1fSBR1y1I1fdFRdwPcpr6Q179cIaSBaHRjmVdgxFjCSvGFuonmGYcpK1nESRfUC1dRUm+T3ggeeOEOIiywRwHpDHm+FUlzBIkjT1k5DzsuhEmGi02HGjmKQ1DWfaioBn7gzAWQRWGWqD2BIzGaCDRm4nc+y+QsuhUqKaqyviAiGcGB7FA1AKVS4ZWVddyibdSEoxJQCKjHsjIMNTpjMBUPsxCDRbQPTyTVGh1k20lwfyy/un2QYmpTII1I9Vo+1B4XQ2q0QvwvExGfTgA")
      format("woff2"),
    url("//at.alicdn.com/iconfont.woff?t=1574391686418") format("woff"),
    url("//at.alicdn.com/iconfont.ttf?t=1574391686418") format("truetype"),
    /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
      url("//at.alicdn.com/iconfont.svg?t=1574391686418#iconfont") format("svg");
  /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-mn_shangchuantupian {
  &:before {
    content: "e559";
  }
  font-size: 3em;
}

.sunui-uploader-img {
  display: block;
  height: 382upx;
  border-radius: 20upx;
}
.img {
  border-radius: 20upx;
}
.sunui-uploader-input {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
   100%;
  height: 100%;
  opacity: 0;
}

.sunui-uploader-inputbox {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  min-height: 350upx;
  height: 382upx;
  background-image: url("/static/img/v4-icon4.png");
  background-repeat: no-repeat;
  background-size: 100%;
  border-radius: 18upx;
  background-position: left top;
}
.bg2 {
  background-image: url("/static/img/v4-icon3.png");
}

.sunui-img-removeicon {
  position: absolute;
  color: #fff;
   24px;
  height: 24px;
  line-height: 24px;
  z-index: 2;
  text-align: center;
  background-color: #fe3333;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;

  &.right {
    top: 0;
    right: 0;
  }
}

.sunui-uploader-file {
  position: relative;
  margin-bottom: 16rpx;
  border-radius: 20upx;
}

.sunui-uploader-file-status:before {
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 20upx;
}

.sunui-loader-filecontent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  z-index: 9;
}

.sunui-uploader-bd {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.sunui-uploader-files {
   80.4%;
  border-radius: 20upx;
}

.sunui-uploader-file:nth-child(4n + 0) {
  margin-right: 0;
}

.sunui-uploader-inputbox > view {
  text-align: center;
}

// .sunui-uploader-file-status:after {
//   content: " ";
//   position: absolute;
//   top: 0;
//   right: 0;
//   bottom: 0;
//   left: 0;
//   background-color: rgba(0, 0, 0, 0.5);
// }

// .sunui-uploader-hover {
//   box-shadow: 0 0 0 #e5e5e5;
//   background: #e5e5e5;
// }

.icon-img {
   116upx;
  height: 116upx;
}
</style>