El subprograma Uniapp le permite seleccionar imágenes del álbum/tomar fotografías y cargarlas directamente

Recientemente, encontré una necesidad cuando trabajaba en un proyecto de mini programa, que es llamar directamente a la interfaz de backend para cargar imágenes después de seleccionar/tomar fotografías del álbum. Creo que si ignoras que el mini programa no se ejecuta según el navegador , luego piensa en qué hacer. Sería un gran error enviar archivos en formato de archivo al backend... porque el entorno JS basado en navegador no tiene clases como FormData, File, etc... Echa un vistazo en las representaciones...

 

Primero, echemos un vistazo a la API UNI para seleccionar / tomar fotografías del álbum. Esto no es nada, solo llámelo directamente de acuerdo con el documento ... 

// 从相册选图
uni.chooseImage({
	count: 12, // 最多可以选择的图片张数，默认9
	sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
	sourceType: ['album'], //album 从相册选图，camera 使用相机
	success: (res) => {
        // TODO SUCCESS
    }
})

// 使用相机
uni.chooseImage({
	count: 12, // 最多可以选择的图片张数，默认9
	sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
	sourceType: ['camera'], //album 从相册选图，camera 使用相机
	success: (res) => {
        // TODO SUCCESS
    }
})

// 从相册选图/使用相机
uni.chooseImage({
	count: 12, // 最多可以选择的图片张数，默认9
	sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
	sourceType: ['album ','camera'], //album 从相册选图，camera 使用相机
	success: (res) => {
        // TODO SUCCESS
    }
})

A través del método anterior, se descubre que a través de res en éxito, se puede obtener la matriz tempFilePaths del archivo de imagen temporal. El archivo temporal se puede entregar al backend para su procesamiento directamente llamando a la interfaz. Dado que el backend no aceptó el archivo temporal en ese momento, haré un paso más para procesar el archivo temporal en base64 y luego se lo pasaré...

Hablemos brevemente sobre cómo convertir archivos temporales a base 64. Primero, obtenga el procesador de archivos a través de uni.getFileSystemManager (), porque necesita un método para leer el archivo, y luego recorra la matriz de archivos temporales para convertirlo en secuencia, porque el El método de lectura del archivo es asincrónico. Sí, Promise.all debe procesarse aquí; de lo contrario, la matriz base64 que pase al backend seguirá siendo la matriz vacía cuando se declaró...

 

Promise.all(
	res.tempFilePaths.map(item => {
		return new Promise((resolve, reject) => {
			fs.readFile({
				filePath: item,
				encoding: 'base64',
				success: res => {
					resolve('data:image/png;base64,' + res
						.data)
				},
				fail: err => {
					reject(err)
				}
			})
		})
	})
).then(results => { // 在这里处理所有文件的内容
	that.uploadLivePic(results)
})

 Has subido correctamente la imagen aquí. Si crees que te resulta útil, puedes dejar una estrella...