以前开发基于C#的是采用razor引擎的,前后不分离的项目,现在开始着手开发前后分离项目时,发现之前利用layui上传文件带参数的方式实现不了了,现在给出解决办法。
在以下before中,传入了4个参数
let uploadInst = upload.render({ elem: '#btn_file' //绑定元素 , url: ApiUrl+'Query/upload/' //上传接口 ,size:'0' , accept: 'file'//这样就支持所有格式的文件上传了,而不仅限于图片格式了 , before: function (obj) { this.data={'param1':isLeaf,'param2':upParentId,'param3':upId,'param4':upIndex};//关键代码 obj.preview(function (index, file, result) { console.log('上传文件尺寸:',file.size); }); let l = layer.msg('导入中,请稍候', { icon: 16, time: false, shade: 0.8 }); } , done: function (res) { //上传完毕回调 console.log('res', res); } , error: function (ex) { //请求异常回调 console.log('ex', ex); } });
关键部分,后台实现,只给出核心代码部分(红色部分)
public class QueryController : ApiController
{
[HttpPost]
public ResponesData upload()
{
//获取从前端传过来的数据
var a = HttpContext.Current.Request.Form;
NameValueCollection query = HttpUtility.ParseQueryString(a.ToString(), Encoding.GetEncoding("gb2312"));
string isLeaf = query["param1"].ToString();
string upParentId = query["param2"].ToString();
string upId = query["param3"].ToString();
string upIndex = query["param4"].ToString();
res.code = "200";
return res;
}
}
model代码部分
public class ResponesData
{
private string Code;
public string code
{
get { return Code; }
set { Code = value; }
}
private string Msg;
public string msg
{
get { return Msg; }
set { Msg = value; }
}
private string Count;
public string count
{
get { return Count; }
set { Count = value; }
}
private object Data;
public object data
{
get { return Data; }
set { Data = value; }
}
}