Vue.js 上传文件(后台使用.net)

页面部分

<div id="app">
    <form id="myform">
        <input type="file" name="fileup" id="fileup" v-on:change="fileChange($event)" />
    </form>

    <br />
    {{img}}
</div>
<script type="text/javascript">

    var app = new Vue({
        el: "#app",
        data: {
            img:""
        },
        methods: {
            fileChange: function (el) {
                if (!el.target.files[0].size) return;

                var obj = new FormData(document.getElementById("myform"));
                obj.append("name", "wzh");
                var _this = this;
                $.ajax({
                    type: ‘post‘,
                    url: ‘/home/ajax‘,
                    data: obj,
                    cache: false,
                    processData: false, // 不处理发送的数据,因为data值是Formdata对象,不需要对数据做处理
                    contentType: false, // 不设置Content-type请求头
                    success: function (res) {
                        var arr=res.split(‘:‘);
                        if(arr[0]=="ok"){
                            _this.img=arr[1];
                        }else{
                        alert(arr[1]);
                        }
                    },
                });
            },
        }
    })
</script> 

Controller

public ActionResult ajax()
        {
                try
                {
                    HttpPostedFileBase uploadfile = Request.Files["fileup"];
                    if (uploadfile == null)
                    {
                        return Content("no:非法上传");
                    }
                    if (uploadfile.FileName == "")
                    {
                        return Content("no:请选择文件");
                    }

                    string fileExt = Path.GetExtension(uploadfile.FileName);
                    StringBuilder sbtime = new StringBuilder();
                    sbtime.Append(DateTime.Now.Year).Append(DateTime.Now.Month).Append(DateTime.Now.Day).Append(DateTime.Now.Hour).Append(DateTime.Now.Minute).Append(DateTime.Now.Second);
                    string dir = "/UploadFile/" + sbtime.ToString() + fileExt;
                    string realfilepath = Request.MapPath(dir);
                    string readDir = Path.GetDirectoryName(realfilepath);
                    if (!Directory.Exists(readDir))
                        Directory.CreateDirectory(readDir);

                    uploadfile.SaveAs(realfilepath);
                    return Content("ok:" + dir);
                }
                catch (Exception ex)
                {
                    return Content("no:" + ex.Message);
                }
        }
时间: 2024-12-26 03:26:12

Vue.js 上传文件(后台使用.net)的相关文章

Jquery AjaxFileUpload.js 上传文件 所遇问题解决办法

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">导入 AjaxFileUpload.js 文件</span> js代码 $.ajaxFileUpload({ url: 'upload',//处理图片脚本 secureuri : false, fileElementId : 'uploadImg',//file控件id da

js 上传文件后缀名的判断 var flag=false;应用

js 上传文件后缀名的判断  var flag=false;应用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> &

js上传文件带参数,并且,返回给前台文件路径,解析上传的xml文件,存储到数据库中

ajaxfileupload.js jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId = 'jUploadFrame' + id; if(window.ActiveXObject) { var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '&qu

Node.js上传文件

var formidable = require('formidable'); var util = require('util'); exports.upload = function(req,res){ var form = new formidable.IncomingForm(); form.encoding = 'utf-8'; form.uploadDir = "E:/file/upload";//目录需要已存在 /** * fields 表单中的其他属性 * files

关于vue+axios上传文件的踩坑分析

上传文件是每个前端开发者都会遇到的问题,在之前实习期做了一个上传文件的功能,当时没有彻底搞明白问题所在,现在重新复盘下. 1.使用formData来上传文件,没有使用axios上传文件,之前在学校有做过.生成一个formData对象 let formData = new FormData() formData.append('xxx', 'yyyyy') 通过dom操作获得input中file[0],然后append给formData对象,网上有详细的api 2.在使用axios之后发先我之前用

js上传文件

一.原始的XMLHttpRequestjs上传文件过程(参考地址:http://blog.sina.com.cn/s/blog_5d64f7e3010127ns.html) 用到两个对象 第一个对象:FormData 第二个对象:XMLHttpRequest 目前新版的Firefox 与 Chrome 等支持HTML5的浏览器完美的支持这两个对象,但IE9尚未支持 FormData 对象,还在用IE6 ? 只能仰天长叹.... 有了这两个对象,我们可以真正的实现Ajax方式上传文件. 示例代码:

原生js上传文件,使用new FormData()

当创建一个内容较多的表单,表单里面又有了文件上传,文件上传也需要表单提交,单一的上传文件很好操作: <form action="接口" enctype="multipart/form-data" method="post"> <input type="file" name="uploadFile"/> <input type="submit" value=&

[原创]使用ajaxFileUpload.js上传文件时附带额外参数。

最近公司的一个项目涉及到导入Excel的功能,于是就想到用ajaxFileUpload来实现上传文件,因为用过很多次了,网上也有很多文章介绍.使用方法不表.但是在附带参数这个环节卡住了:文件可以上传到后台,但是附带的json参数怎么都传不到后台. 通过网上的文章和查看ajaxFileUpload.js源码发现:ajaxFileUpload.js本身根本就不支持附带参数. function ajaxFileUpload(DOMId,row){ var param={"exam.class_id&q

vue element-ui,上传文件加载进度条显示效果(使用定时器实现源码分享)

上传文件效果如图: 父组件相关代码 html <drag-upload ref='mychild' action="//接口相关地址" v-model="versionwareList" @submitUploadParent='formSubmit' @input='delUpload' :autoUpload="autoUpload" :visible="visible" :disabled="disabl