前端上传file文件转base 64码，后端.net API 接收_前端传文件路径转码了-优快云博客

本文链接：https://blog.youkuaiyun.com/xqyunyun/article/details/108328825

参考代码如下

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
    <title>测试上传文件</title>
    <style type="text/css"></style>
</head>
<body>
<div>
 <!--accept只能与file配合使用。它可以限制上传的文件类型
    当然你也可以写成 accept="image/*"-->
    <input type="file" id="myimg"
           onchange="imgChange(this)"
           accept="image/png,image/gif,image/jpeg"/>
</div>
<div>
<img  id="img">
</div>
<script>
function imgChange(img) {
    // 生成一个文件读取的对象
    const reader = new FileReader();
    reader.onload = function (ev) {
        // base64码
        var imgFile =ev.target.result;//或e.target都是一样的
console.log(imgFile);
        document.querySelector("img").src= ev.target.result;
    }
    //发起异步读取文件请求，读取结果为data:url的字符串形式，
    reader.readAsDataURL(img.files[0]);
}
</script>
</body>
</html>

2、运用到实际项目中

 function UploadImgPython() {
            //var formData = new FormData();
            var imgbase64code = null;
            var fileObj = $("#image")[0].files;
            // 生成一个文件读取的对象
            const reader = new FileReader();
            reader.onload = function (ev) {
                // base64码
                var imgFile = ev.target.result;//或e.target都是一样的
                imgbase64code = imgFile.replace("data:image/jpeg;base64,", "");
                var data = {};
                data.imageBaseCode = imgbase64code;//这种形式才能把base64传到api后台
                $.ajax({
                    type: 'POST',
                    url: domainName + "Query/UploadImgPython",
                    dataType: 'json',
                    contentType: 'application/json; charset=utf-8',
                    data: JSON.stringify(data),//这里需要注意
                    headers: { "Authorization": "Bearer" + " " + authtoken + "" },
                    success: function (data) {
                        console.log(data);
                        if (data.Tag == 1) {
                            $("#materialNo").val(data.Result);
                            SearchClick(1);
                            SearchClick(data.Result);
                        }
                        else {
                            alert("上传图片获取物料编号失败");
                        }
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        console.log(jqXHR + textStatus + errorThrown);
                        /*错误信息处理*/
                        //alert(jqXHR + textStatus + errorThrown);
                        //ReLogin();
                    }
                });
                //imgbase64code = imgFile;
                document.querySelector("img").src = ev.target.result;
            }
            //发起异步读取文件请求，读取结果为data:url的字符串形式，
            reader.readAsDataURL(fileObj[0]);
            console.log("aaaaaaaaaa");
            console.log(imgbase64code);
        }

3、.net api接收

  /// <summary>
        /// 把上传的图片转换为物料编号去查询
        /// </summary>
        /// <param name="data"></param>
        /// <returns></returns>
        [HttpPost]
        [Authorize]
        public async Task<TData<string>> UploadImgPython([FromBody] JObject data)
        {
            TData<string> obj = new TData<string>();
            try
            {
                var imgbase64code = data["imageBaseCode"].ToObject<string>();
                var fileName = data["fileName"].ToObject<string>();

                obj.Message = imgbase64code;
                RestClient client = new RestClient("http://www.baidu.com/image-classify/?access_token=abcdefg123456789");
                RestRequest request = new RestRequest(Method.POST);
                request.AddHeader("Content-Type", "application/x-www-form-urlencoded");
                request.AddParameter("image", imgbase64code);
                IRestResponse response = client.Execute(request);
                var json = response.Content;
                UploadImgReturnDataPython returnData = new UploadImgReturnDataPython();
                returnData = JsonConvert.DeserializeObject<UploadImgReturnDataPython>(json);
                obj.Tag = 1;
                obj.Result = returnData.value.pn;
            }

            catch (Exception ex)
            {
                obj.Tag = 0;
                obj.Result = ex.Message.ToString();
            }
            return obj;
        }