uni-app 学习笔记 图片（地址） 图片上传 图片转Base64 2021-02-23

学习目标：uni-app前端学习

学习内容：

1 关于图片方面的小技巧

在涉及到使用一些网络图片时，不需要下载到本地，可以直接点击右键复制图片地址，放入到对应的图片地址（src）当中去
例如：

复制某张图片地址
https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553187020783&di=bac9dd78b36fd984502d404d231011c0&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201609%2F26%2F20160926173213_s5adi.jpeg
将该地址嵌入到你所要放的src地址当中，
对应的直接在前端显示，不需要调整图片的存放路径

这样有两个好处：
1 不需要将图片下载下来存储到本地，每次想在前端显示图片的时候还要去寻找图片的地址路径
2 能够在一定的程度上回避前端图片整个上传至服务器的问题（虽然也有对应的解决方案）

uni-app图片选择、上传

concat函数 起到一个附加的作用，请看下面的代码

uni.chooseImage({
	sourceType: sourceType[this.sourceTypeIndex],
	sizeType: sizeType[this.sizeTypeIndex],
	count: this.imageList.length + this.count[this.countIndex] > 9 ? 9 - this.imageList.length : this.count[this.countIndex],
	success: (res) => {
		console.log("开始是没有数据的");
		console.log(JSON.stringify(this.imageList));
		this.imageList = this.imageList.concat(res.tempFilePaths)//非APP平台不支持自定义压缩,暂时没有处理,可通过uni-app上传组件的sizeType属性压缩
		//concat是指附加到后续的图片列表上
		
		console.log("附加数据之后出现内容")
		console.log(JSON.stringify(this.imageList));
						
					}
				})
			},

开始时没有数据的，可以看到，通过concat函数，附加了一段新的内容，存放的是图片的地址

将上传的图片转换为Base64格式

在uni-app当中，如果需要将图片和Base64之间进行转换，可以使用插件image-tools
地址：https://ext.dcloud.net.cn/plugin?id=123
但是自己实际操作的一下，好像还是没有跑通，可能是传入的参数格式不对，当然，也不排除其他可能

之后，通过百度等各种调试，实现了图片到base64的转换
将参数传入tobase64方法当中,然后在用arrayBufferToBase64方法进行转换
代码如下：

uni.chooseImage({
	sourceType: sourceType[this.sourceTypeIndex],
	sizeType: sizeType[this.sizeTypeIndex],
	count: this.imageList.length + this.count[this.countIndex] > 9 ? 9 - this.imageList.length : this.count[this.countIndex],
		success: (res) => {
			console.log("开始是没有数据的");
            console.log(JSON.stringify(this.imageList));
			//concat是指附加到后续的图片列表上
			this.imageList = this.imageList.concat(res.tempFilePaths)//非APP平台不支持自定义压缩,暂时没有处理,可通过uni-app上传组件的sizeType属性压缩
			console.log("附加数据之后出现内容")
			console.log(JSON.stringify(this.imageList));
			console.log(res.tempFilePaths[0]-)
			
			
			var path=res.tempFilePaths[0]
			this.tobase64(path)
		}
  })
  //转base64
tobase64(url){
	uni.request({
	url: url,
	method:'GET',
	responseType: 'arraybuffer',
	success: res => {
		let base64 = wx.arrayBufferToBase64(res.data); //把arraybuffer转成base64 
		base64 = 'data:image/jpeg;base64,' + base64 //不加上这串字符，在页面无法显示的哦
		console.log(base64)
	}
	})
},	

有趣的是，在uni-app的JS部分当中 好像也可以使用wx的一些方法，比如这里就用到了wx.arrayBufferToBase64(res.data)，可能需要进行配置过，也可能不需要。