wardrobe/pages/putstorage/index.vue

<template>
	<view :style="{ minHeight: sys.windowHeight + 'px' }"
		:class="[$tm.vx.state().tmVuetify.black ? 'black' : ' ']">
		<tm-menubars title="入库" :shadow="0" :showback="true"></tm-menubars>
		<tm-message ref="toast"></tm-message>
		<tm-button theme="white" @click="shangchuan()">上传</tm-button>
		<image block class="zhanshi" mode="widthFix" :src="src"></image>
		<tm-button theme="bg-gradient-blue-accent" @click="paizhao()" block>拍照</tm-button>
	</view>
</template>	
<script>
import{myRequest} from '@/api/request.js'
import { pathToBase64, base64ToPath } from '@/js_sdk/mmmm-image-tools/index.js'
export default {
	data() {
		return {
			src:'',
			imgpath : [],
			tag : 0,
			imgbase64 : []
		};
	},
	onLoad() {
		
	},
	created() {
		this.sys = uni.getSystemInfoSync();
		// uni.request({
		// 	url: "https://jisutqybmf.market.alicloudapi.com/weather/query",
		// 	method: "get",
		// 	header: {
		// 		'Authorization':'APPCODE e4b9accfb1f246cb8c0766a54efe8730'
		// 	},
		// 	data:{
		// 		city:'南京'
		// 	},
		// 	dataType:'json',
		// 	success : function(data) {
				
		// 	},
		// 	error : function(e) {
		// 		alert("网络异常，请重试");
		// 	}
		// });
	},
	methods: {
		shangchuan(){
			var that=this;
			uni.chooseImage({     //uni官方api，用于选取本地图片
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album','camera'], //从相册选择
				success: function (res) {
					var imgpath = res.tempFilePaths[0]   //先获得本地文件的路径列表，存储到数组
					myRequest({
						url: "/common/uploads/upload",
						method:'post',
						data:{
							file:imgpath
						}
					}).then(res => {
						if (res.data.code == 200) {
							that.$refs.toast.show({model:'success',label:res.data.msg})
						}else{
							that.$refs.toast.show({model:'error',label:res.data.msg})
						}
					})
				}
			})
			
		},
		paizhao(){
			var that=this;
			uni.chooseImage({     //uni官方api，用于选取本地图片
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album','camera'], //从相册选择
				success: function (res) {
					that.imgpath = res.tempFilePaths[0]   //先获得本地文件的路径列表，存储到数组
					console.log(that.imgpath)          //注意该api会将路径转换为blob格式
					that.getBase64Image(that.imgpath);
				}
			})
		},
		getBase64Image(path){
			var that=this;
			console.log(" 开始转换")
			pathToBase64(path)
			  .then(base64 => {
			   that.shibie(base64)
			  })
			  .catch(error => {
			    console.error(error)
			  })
			// for(let i=0;i<that.imgpath.length;i++){
			// 	var url = that.imgpath[i]
			// 	getImgToBase64(url,function(dataURL){
			// 		that.imgbase64.push(dataURL)
			// 		that.shibie(dataURL[0])
			// 	})
			// }
			// function getImgToBase64(url,callback){
			//   var canvas = document.createElement('canvas'),
			// 	ctx = canvas.getContext('2d'),
			// 	img = new Image;
			//   img.crossOrigin = 'Anonymous';
			//   img.onload = function(){
			// 	canvas.height = img.height;
			// 	canvas.width = img.width;
			// 	ctx.drawImage(img,0,0);
			// 	var dataURL = canvas.toDataURL('image/png');
			// 	callback(dataURL);
			// 	canvas = null;
			//   };
			//   img.src = url;
			// }
		},
		shibie(src){
			var that=this;
			// 抠图
			// uni.request({
			// 	url: 'https://objseg.market.alicloudapi.com/commonseg/rgba',
			// 	method : "post",
			// 	header: {
			// 		'Authorization':'APPCODE e4b9accfb1f246cb8c0766a54efe8730',
			// 		"Content-Type":"application/json;charset=UTF-8"
			// 	},
			// 	data:{
			// 		photo:src
			// 	},
			// 	success : function(data) {
			// 		console.log(data)
			// 		that.src=data.data.data.result
			// 	},
			// 	error : function(e) {
			// 		alert("网络异常，请重试");
			// 	}
			// });
			// 识别
			uni.request({
				url: 'https://dect.market.alicloudapi.com/imgdect',
				method : "post",
				header: {
					'Authorization':'APPCODE e4b9accfb1f246cb8c0766a54efe8730',
					"Content-Type":"application/x-www-form-urlencoded; charset=UTF-8"
				},
				data:{
					src:src
				},
				success : function(data) {
					console.log(data)
					// that.src=data.data.data.result
				},
				error : function(e) {
					alert("网络异常，请重试");
				}
			});

		}
	},
}
</script>

<style lang="scss">
	/deep/ .tm-menubars .body{
		background-color: #1b1b1b !important;
	}
</style>