uniapp，web从文件流获取图片地址，并展示图片

uniapp，从文件流获取图片地址，并展示图片

不同与web端，uniapp在处理图片文件流的时候，略有区别，上代码

<template>
	<view class="wrap">
		<img :src="qrUrl">
	</view>
</template>


	export default {
		data() {
			return {
				qrUrl:'' ,//图片路径
			}
		},
		mounted() {
			this.getPoto()
		},
		methods: {
			getPoto(){
			   uni.request({
					url: '',  //请求文件流地址
					method: 'POST',
					data: [], //请求参数
					responseType: "arraybuffer",
					success: res => {
						let datas = res.data
						this.qrUrl = 'data:image/png;base64,' + btoa(new Uint8Array(datas).reduce((datas, byte) => datas + String.fromCharCode(byte), ''))
					},
					fail: () => {},
					complete: () => {},
				});
			}
		}
	}

Web端

  export default {
    data () {
      return {
        visible: false,
        uploadUrl: '',
        dataForm: {
          id: 0,
          avatar: ''
        },
        dataRule: {
          avatar: [
            {required: true, message: '头像不能为空', trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      init (id) {
        // 初始化文件上传url，当点击上传文件时自动上传到后台接口
        this.uploadUrl = this.$http.adornUrl(
          `/sys/avatar/save?token=${this.$cookie.get('token')}`
        )
        this.dataForm.id = id || 0
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.id) {
            this.$http({
              url: this.$http.adornUrl(`/sys/avatar/info/${this.dataForm.id}`),
              method: 'get',
              responseType: 'blob',
              params: this.$http.adornParams()
            }).then(({data}) => {
              const blob = new Blob([data])
              this.dataForm.avatar = URL.createObjectURL(blob)
            })
          }
        })
      }
    }
  }

注意：本文归作者所有，未经作者允许，不得转载