直接上代码

服务端代码如下

private static readonly Baidu.Aip.ImageClassify.ImageClassify client = new Baidu.Aip.ImageClassify.ImageClassify(ApiConfig.APIKey, ApiConfig.SecretKey);

///

/// 植物识别

///

///

public PlantModel PlantDetect(string filesrc)

{

var image = File.ReadAllBytes(filesrc);

var result = client.PlantDetect(image);

return GetPlant(result);

}

///

/// 植物识别

///

///

///

public JsonResult PlantDetect(string serverId = "")

{

string filename = System.Web.HttpContext.Current.Server.MapPath("/Static/img/demoplant.jpg");

if (!string.IsNullOrWhiteSpace(serverId))

{

filename = GetFileName(serverId);

}

var data = imageClassify.PlantDetect(filename);

return Json(data, JsonRequestBehavior.AllowGet);

}

///

/// 下载微信图片

///

/// 微信返回的图片的服务器端ID

///

private string GetFileName(string serverId)

{

string filename = System.Web.HttpContext.Current.Server.MapPath("/upload/img/");

if (!System.IO.Directory.Exists(filename))

System.IO.Directory.CreateDirectory(filename);

string date = DateTime.Now.ToString("yyyy-MM-dd");

filename += date + "/";

if (!System.IO.Directory.Exists(filename))

System.IO.Directory.CreateDirectory(filename);

string guid = Guid.NewGuid().ToString();

filename += $"/{guid}.jpg";

WeixinUtility.GetVoice(serverId, filename);

return filename;

}

前端代码如下

@{

if (ViewData["type"].ToString() == "1")

{

ViewBag.Title = "植物识别";

}else if (ViewData["type"].ToString() == "2")

{

ViewBag.Title = "动物识别";

}

else if (ViewData["type"].ToString() == "3")

{

ViewBag.Title = "车型识别";

}

Layout = "~/Views/Shared/_LayoutWeUI.cshtml";

}

@section PageJS{

var app = new Vue({

el: "#app",

data: {

imgsrc: "",

localId: "",

serverId: "",

flag: 1,

recorder: null,

title: "",

url: "",

result:[]

},

mounted: function () {

var that = this;

var type [email protected]["type"];

if (type == 1) {

this.title = "植物";

this.imgsrc = "/Static/img/demoplant.jpg";

this.url = '@Url.Action("PlantDetect", "ImageRecognition")';

}

else if (type == 2) {

this.title = "动物";

this.imgsrc = "/Static/img/demoanimal.jpg";

this.url = '@Url.Action("AnimalDetect", "ImageRecognition")';

}

else if (type == 3) {

this.title = "车型";

this.imgsrc = "/Static/img/democar.jpg";

this.url = '@Url.Action("CarDetect", "ImageRecognition")';

}

this.detect();

},

methods: {

detect() {

var that = this;

$.sunloading.show("正在识别");

$.ajax({

url: this.url,

dataType: "json",

type: "post",

data: { serverId: this.serverId },

success: function (result) {

$.sunloading.close();

console.log("识别结果：" + result);

that.result = result.result;

},

error: function (e) {

console.log(e);

}

});

},

getscore(score) {

return (score * 100).toFixed(2) + "%";

},

uploader() {

var that = this;

wx.chooseImage({

count: 1, // 默认9

sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有

sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有

success: function (res) {

console.log(res.localIds);

that.localId = res.localIds[0]; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片

that.uploadImage();

}

});

},

uploadImage() {

var that = this;

wx.uploadImage({

localId: that.localId, // 需要上传的图片的本地ID，由chooseImage接口获得

isShowProgressTips: 1, // 默认为1，显示进度提示

success: function (res) {

that.serverId = res.serverId; // 返回图片的服务器端ID

that.detect();

}

});

}

}

});

}

运行效果如下