element-上传控件与Net WebAPI结合使用

方案一_IFormFile接收：

1、element

<el-form-item label="上传文件">
					<el-upload 
					ref="upload" 
					:auto-upload="false" 
					:limit="1" 
					:on-change="updownChangeHandler"
						:on-success="updownSuccessHandler" 
						:on-error="updownErrorHandler" 
						:action="uploadURL"
						accept="xlsx,xls" 
						class="upload-demo" 
						drag 
						multiple>
						<i class="el-icon-upload"></i>
						<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
						<div slot="tip" class="el-upload__tip">只能上传.xls/.xlsx文件，且不超过30MB</div>
					</el-upload>
</el-form-item>
                                    
       。。。
computed: {
		    //文件的上传路径
		    //附带用户id和项目名称
		    uploadURL: function () {
			return "http://localhost:5000/api/UpLoadFile?fileDirectory=" + this.form.SavePath_Folder;
		    }
},
methods: {
            // 上传文件改动
		    updownChangeHandler(file) {
			    this.form.Name = file.name;
		    },
       // 上传出错时
	   updownErrorHandler(err, file, fileList) {
			console.log(err);
			this.$message({
				message: "模板上传出错：" + err.message,
				type: "error"
			});
	   },
       // 上传文件完成
	   updownSuccessHandler(response, file, fileList) {
			if (response.code !== 0) {
				console.log(response);
				this.$message({
					message: "模板上传出错：" + response.message,
					type: "error"
				});
			} else {
				console.log("文件上传完成");
				this.$message({
					message: "模板添加完成！" + response.message,
					type: "success"
				});

				this.$refs.upload.clearFiles();
				this.$parent.getList();
				this.dialogVisible = false;
			}

	   }
}

2、WebAPI

/// <summary>
        /// 上传
        /// </summary>
        /// <param name="file">form表单文件流信息</param>
        [HttpPost("UpLoadFile")]
        //public async Task<ActionResult<JsonMessage>> UpLoadFile(IFormFile file)
        public async Task<ActionResult<JsonMessage>> UpLoadFile(IFormFile file, string fileDirectory)
        {
            var data = new JsonMessage();

            //IFormFileCollection files = Reqzuest.Form.Files;

            string path = AppDomain.CurrentDomain.BaseDirectory + @"StaticFiles/OpcSetUpTemplates/";  // 保存的根目录
            var allowType = new string[] { "application/vnd.ms-excel", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" };  // 上传文件的格式限制 xls与xlsx
            var limitSize = 1024 * 1024 * 1024 * 1.5;                                  // 上传文件的大小限制，小于1.5G

            if (file == null)  // 校验是否获取到文件
            {
                data.code = -1;
                data.message = "请选择上传的文件！";
                return data;
            }
            if (!allowType.Contains(file.ContentType))  // 格式不是我们需要的
            {
                data.code = -1;
                data.message = "文件格式错误！";
                return data;
            }
            if (file.Length > limitSize)  // 限制大小
            {
                data.code = -1;
                data.message = "文件大小不可超过1.5GB";
                return data;
            }
            //if (!Directory.Exists(path))  // 保存根目录不存在就新建
            //{
            //    Directory.CreateDirectory(path);
            //}
            // 获取文件
            path += fileDirectory ?? "";    // 保存目录
            if (!Directory.Exists(path))  // 保存目录不存在就新建
            {
                Directory.CreateDirectory(path);
            }

            //foreach (var file in files)  // 存在多个文件时
            path = Path.Combine(path, file.FileName);  // 文件保存路径

            //if (System.IO.File.Exists(path))
            //{  // 文件路径中已存在该文件时
            //    data.code = -1;
            //    data.message = "文件路径中已存在该文件！";
            //    return data;
            //}

            using (var stream = new FileStream(path, FileMode.OpenOrCreate, FileAccess.ReadWrite))
            {
                await file.CopyToAsync(stream);
            }

            // 返回结果信息
            data.code = 0;
            data.message = "上传成功！文件路径：" + fileDirectory + file.FileName;
            return data;
        }

方案二：

1、element

 

2、WebAPI

 

作者：꧁执笔小白꧂