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

我不是女神ヾ 2022-06-06 10:07 218阅读 0赞

页面部分

<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);
                    }
            }