H5+上传注意要点及服务端代码

Posted 2021-01-14 albertsmith

// 上传文件
function upload(num) {
    console.log("num：" + num);
    console.log("headImg.src.:" + headImg.src);
    if(num == 0 && headImg.src.indexOf(‘img/header.png‘) > -1) {
        plus.nativeUI.alert("请添加头像图片文件！");
        return;
    }
    console.log("cardFrontImg.src.:" + cardFrontImg.src);
    if(num == 1 && cardFrontImg.src.indexOf(‘img/upload.png‘) > -1) {
        plus.nativeUI.alert("请添加身份证正面图片文件！");
        return;
    }
    console.log("cardBackImg.src.:" + cardBackImg.src);
    if(num == 2 && cardBackImg.src.indexOf(‘img/upload.png‘) > -1) {
        plus.nativeUI.alert("请添加身份证反面图片文件！");
        return;
    }
    console.log("开始上传：")
    var wt = plus.nativeUI.showWaiting();
    var server = uri + "appupload/PostFile";
    console.log("upload url server:" + server);
    var task = plus.uploader.createUpload(server, {
            method: "POST"
        },
        function(t, status) { //上传完成
            if(status == 200 || status == 201) {
                var strData = t.responseText;
                if(strData != "") {
//                    var data = strData.split(",");
//                    document.getElementById("relativeUrl").value = (data[0].split(":"))[1];
//                    document.getElementById("absoluteUrl").value = (data[1].split(":"))[1];
                    plus.nativeUI.alert("上传成功!");
                }
                wt.close();
            } else {
                plus.nativeUI.alert("上传失败：" + status);
                wt.close();
            }
        }
    );
    task.addData("imageNum", num + "");//区分头像 和 身份证
    task.addData("sys_app_secret", homecamp.data.qq007_secret);
    task.addData("sys_app_clientId", c.getClientId());
    task.addData("sys_app_token", localStorage.getItem("api_token"));
    task.addData("sys_app_id", homecamp.data.qq007_appid + "");
    //添加其他参数
    if(num == 0) {
        task.addFile(headImg.src, {
            key: "file"
        });
    }
    if(num == 1) {
        task.addFile(cardFrontImg.src, {
            key: "file"
        });
    }
    if(num == 2) {
        task.addFile(cardBackImg.src, {
            key: "file"
        });
    }
    task.start(); 
}

 

1.用plus.uploader.createUpload上传文件经常要跟上其他参数,如上面代码的

task.addData(key,value);就是添加POST的参数.
*重要的点事value要string类型的,js里面就直接这样写:

task.addData(key,value + "");
不然在服务端是接收不到参数的.

2.web api 服务端代码:

        [HttpPost]
        public HttpResponseMessage PostFile()
        {
            string SaveTempPath = "";
            HttpResponseMessage result = null;
            var httpRequest = HttpContext.Current.Request;
            int imageNum = string.IsNullOrEmpty(httpRequest.Params["imageNum"]) ? 0 : int.Parse(httpRequest.Params["imageNum"]);
            switch (imageNum)
            {
                case 0://文件保存目录路径 
                    SaveTempPath = HomeCamp.Biz.Dict.SysConfig.GetValue("system_init", "imgHeaderSaveUrl");//头像
                    break;
                case 1:
                case 2:
                    SaveTempPath = HomeCamp.Biz.Dict.SysConfig.GetValue("system_init", "imgIdCardSaveUrl");//身份证
                    break;
            };
            if (httpRequest.Files.Count > 0)
            {
                var docfiles = new List<string>();
                foreach (string file in httpRequest.Files)
                {
                    var postedFile = httpRequest.Files[file];
                    var filePath = HttpContext.Current.Server.MapPath("~/" + SaveTempPath + postedFile.FileName);
                    postedFile.SaveAs(filePath);

                    docfiles.Add(filePath);
                }
                result = Request.CreateResponse(HttpStatusCode.Created, docfiles);
                //数据库操作
                #endregion
            }
            else
            {
                result = Request.CreateResponse(HttpStatusCode.BadRequest);
            }
            return result;
        }