VS Code 的图片上传

一、控制器操作

   引用两个

    using System.Web;

    using System.IO;

 

     在控制器中

[HttpPost,Route("api/upload")]
        public IHttpActionResult UpLoad()
        {
            //一、
            //var httpFile = HttpContext.Current.Request.Files[0];
            //var pathService = HttpContext.Current.Server.MapPath("/Images/");
            //httpFile.SaveAs(pathService + httpFile.FileName);
            //return Json(new { url =  httpFile.FileName });
 
            //二、
            //http 协议 Request Response
            //获取文件
            var hpf = HttpContext.Current.Request.Files[0];
            //新名称
            var newFileName = Guid.NewGuid().ToString();
            //获取扩展名
            var ext = Path.GetExtension(hpf.FileName);
            //将文件名和扩展名拼接
            var newName = newFileName + ext;
            //找到路径  将虚拟路径转成物理路径
            var path = HttpContext.Current.Server.MapPath("/Images");
            //合并路径和文件名
            var newPath = Path.Combine(path, newName);
            //保存
            hpf.SaveAs(newPath);
            return Json(new { url=  newName });
 
        }

二、VS  Code操作

    创建文件后引入element和axios这两个

<el-form-item label="头像">
        <el-upload class="avatar-uploader"
                   action="http://localhost:54080/api/upload"
                   :show-file-list="false"
                   :on-success="handleAvatarSuccess"
                   :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl"
               :src="imageUrl"
               class="avatar">
          <i v-else
             class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

  图片只需要改变action中的路径

  其它的不需要更改

 

posted @ 2021-09-09 22:11  魔术人生  阅读(98)  评论(0编辑  收藏  举报
复制代码