62,052
社区成员
发帖
与我相关
我的任务
分享还是那个问题，用c# webapi实现文件上传，因为使用form受限，想完全用base64方式实现文件上传！请教
原先工程里，参考了很多大神的代码，很有用。因为受限于外界操作的要求，需要用base64方式实现文件上传到服务器。想实现这样的方式，最好是从页面到webapi代码都给个参考！
...全文
请发表友善的回复…
发表回复
ruan1978 2017-11-09
- 打赏
- 举报
这个我解决了！现在是这样，出现值传不过去了。错误是：Failed to load resource: the server responded with a status of 404 (Not Found)
<form id= "uploadForm">
<p >指定文件： <input type="text" id="filename" name="filename" value= ""/></p >
<p >上传文件：<input type="file" id="file" name="file" onchange="checkPicture()"/> </p>
<input type="button" value="上传" id="btnUpload" />
<input type="hidden" id="base64url" />
</form>
通过一个hidden传值，解决了问题，然后传值过去，出现错误了。
<script type="text/javascript">
function checkPicture() {
var base64;
var file1 = document.getElementById('file').files[0];
var reader = new FileReader();// 新建一个这对象(可能有兼容性问题)
if (file1) {
reader.readAsDataURL(file1); // 对象载入INPUT里的文件
reader.addEventListener("load", function () {
base64 = reader.result;
$("#base64url").val(reader.result);
}, false);
}
}
</script>
[HttpPost]
public bool UploadIcon(string strUserID, string strBase64)
{
byte[] imgbytes = Convert.FromBase64String(strBase64);// 转为二进制
FileStream fs = new FileStream("d:/imgs.jpg", FileMode.Create);// 保存到本地
fs.Write(imgbytes, 0, imgbytes.Length);
fs.Close();
return true;
}
跳不进去。
mirrorspace 2017-11-09
- 打赏
- 举报
{img:base64}是个JSON对象.后台取值时用img键
....
你需要先学习基础知识了...
ruan1978 2017-11-09
- 打赏
- 举报
你用的可能不是最新的语法糖，所以你改成request.Files[0].SaveAs(@"d:/保存目录/"+request.Files[0].FileName);
如果你一点点都不会，那应该先好好学习入门书籍。
[/quote]
if(request.Files.Count>0)
{
//request.Files[0].SaveAs($"d:/保存目录/{request.Files[0].FileName}"); //$改成@,但是在目录下就是存了个{request.Files[0].FileName}这个文件名.
}
ruan1978 2017-11-09
- 打赏
- 举报
大侠，你这个$.post()的第二个参数，img:base64,这个img是什么？我在后台写了一个对应的接口，获取不到。
[HttpPost]
public object UploadIcon(dynamic obj)
{
var strbase64 = Convert.ToString(obj.img); //提示错误 “object”未包含“img”的定义
return strbase64;
}
前端就是如你所给的代码：
function doUpload() {
var base64;
var file1 = document.getElementById('file').files[0];
var reader = new FileReader();// 新建一个这对象(可能有兼容性问题)
if (file1) {
reader.readAsDataURL(file1); // 对象载入INPUT里的文件
// 当图片加载完成时.
reader.addEventListener("load", function () {
base64 = reader.result;// 要得到BASE64需要等图片加载完成后result才有值
}, false);
}
//alert(base64);
$.post('/api/Tool/UploadIcon', { img: base64 }, function (data) {
alert(data.msg)
}, 'application/json')
}
mirrorspace 2017-11-09
- 打赏
- 举报
<p >指定文件： <input type="text" id="filename" name="filename" value= ""/></p >
<p >上传文件：<input type="file" id="file" name="file" onchange="checkPicture()"/> </p>
<input type="button" value="上传" id="btnUpload" onclick="uploadfile()"/>
<input type="hidden" id="base64url" />
<script>
// 当INPTU文件框内容改变时
function checkPicture() {
var base64;
var file1 = document.getElementById('file').files[0];
var reader = new FileReader();// 新建一个这对象(可能有兼容性问题)
if (file1) {
reader.readAsDataURL(file1); // 对象载入INPUT里的文件
reader.addEventListener("load", function () {
base64 = reader.result;
$("#base64url").val(reader.result);
}, false);
}
}
// 点击上传按钮时
function uploadfile()
{
var json={strBase64: $("#base64url").val()};
$.post('UploadIcon',json,function(data){
})
}
</script>
// 服务端 MVC
[HttpPost]
public ActionResult UploadIcon()
{
string base64str = Request.Form.Get("strBase64");
byte[] imgbytes = Convert.FromBase64String(strBase64);// 转为二进制
FileStream fs = new FileStream("d:/imgs.jpg", FileMode.Create);// 保存到本地
fs.Write(imgbytes, 0, imgbytes.Length);
fs.Close();
return true;
}
// 服务端 WEBAPI
[HttpPost]
public IHttpActionResult UploadIcon()
{
var request = System.Web.HttpContext.Current.Request;
string base64str = request.Form.Get("strBase64");
byte[] imgbytes = Convert.FromBase64String(strBase64);// 转为二进制
FileStream fs = new FileStream("d:/imgs.jpg", FileMode.Create);// 保存到本地
fs.Write(imgbytes, 0, imgbytes.Length);
fs.Close();
return true;
}
ruan1978 2017-11-08
- 打赏
- 举报
取到了base64这个信息，传递过去吗?还是要做个处理？
正怒月神 版主 2017-11-08
- 打赏
- 举报
你用的可能不是最新的语法糖，所以你改成request.Files[0].SaveAs(@"d:/保存目录/"+request.Files[0].FileName);
如果你一点点都不会，那应该先好好学习入门书籍。
ruan1978 2017-11-08
- 打赏
- 举报
后面就是讲file保存就好啦。楼上不是都有给代码吗[/quote]
楼上的写的这几句不理解：
if(request.Files.Count>0)
{
//request.Files[0].SaveAs($"d:/保存目录/{request.Files[0].FileName}"); //这句我注释去掉出错！
}
正怒月神 版主 2017-11-08
- 打赏
- 举报
后面就是讲file保存就好啦。楼上不是都有给代码吗
mirrorspace 2017-11-08
- 打赏
- 举报
不需要.这个$.post是JQUERY提供的AJAX简便方法
ruan1978 2017-11-08
- 打赏
- 举报
需要额外再写一个js函数吗?
mirrorspace 2017-11-08
- 打赏
- 举报
用POST方式传参数,将BASE64当普通字符串传就行.
例如
var base64='XXX';
$.post('URL',{img:base64},function(data){
alert(data.msg)
})
ruan1978 2017-11-08
- 打赏
- 举报
function sub() {
var file1 = document.getElementById('file').files[0];
var reader = new FileReader();// 新建一个这对象(可能有兼容性问题)
//var formData = new FormData();
//formData.append("file", document.getElementById("file").files[0]);
if (file1) {
reader.readAsDataURL(file1); // 对象载入INPUT里的文件
// 当图片加载完成时.
reader.addEventListener("load", function () {
var base64 = reader.result;// 要得到BASE64需要等图片加载完成后result才有值
alert(base64); //取到了
}, false);
}
但是这么大的base64数据如何传递过去？
ruan1978 2017-11-07
- 打赏
- 举报
您能给我整理完整点吗？我是菜鸟。
ruan1978 2017-11-07
- 打赏
- 举报
后面怎么处理？
mirrorspace 2017-11-07
- 打赏
- 举报
前台代码可用正月怒神的
后台如果用WEBAPI的话,代码如下
[HttpPost]
public IHttpActionResult UploadFormdata()
{
var request = System.Web.HttpContext.Current.Request;// 这句是关键.不能用WEBAPI的Request
// 到这里就一样的
if(request.Files.Count>0)
{
//request.Files[0].SaveAs($"d:/保存目录/{request.Files[0].FileName}");
}
return this.Json(new { });
}
如果要将图片弄成BASE64上传可以用这种
var file1 = document.getElementById('file').files[0];// 得到INPUT里的图片,事先选好
var reader = new FileReader();// 新建一个这对象(可能有兼容性问题)
if (file)
{
reader.readAsDataURL(file); // 对象载入INPUT里的文件
// 当图片加载完成时.
reader.addEventListener("load", function ()
{
var base64=reader.result;// 要得到BASE64需要等图片加载完成后result才有值
}, false);
}
正怒月神 版主 2017-11-07
- 打赏
- 举报
效果
正怒月神 版主 2017-11-07
- 打赏
- 举报
前台：
[javascript] view plain copy
<form id="form1">
<input type="file" id="file" name="file"/>
<input type="button" value="提交" onclick="sub()" />
</form>
<script>
function sub() {
var formData = new FormData();
formData.append("file", document.getElementById("file").files[0]);
$.ajax({
url: "/Test/UploadFile",
type: "POST",
data: formData,
contentType: false,
processData: false,
success: function (data) {
}
});
}
</script>
后台：
[csharp] view plain copy
[HttpPost]
public ActionResult UploadFile(HttpPostedFileBase file)
{
return RedirectToAction("Index");
} 
清澈的风 2017-11-07
- 打赏
- 举报
替楼主顶一下
