vue 文件上传前后端_vue上传文件到后端

一、前端vue3

    <el-dialog title="编辑" v-model="editFormVisible">
      <el-form ref="editForm" :model="editForm" :rules="rules" status-icon label-width="90px">
        <el-form-item label="选择文件:" prop="">
          <el-upload v-model:file-list="editForm.fileList" class="upload-demo"
            :action="fileBaseUrl" :headers="uploadHeaders" :on-change="handleChange">
            <el-button type="primary">Click to upload</el-button>
            <template #tip>
              <div class="el-upload__tip">
                jpg/png files with a size less than 500kb
              </div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveEdit" :loading="saveBtnLoading">确 定</el-button>
        </span>
      </template>
    </el-dialog>

 fileBaseUrl：上传后台接口地址

uploadHeaders：身份验证token

二、后台C#接口

 [HttpPost("upload")]
 [ProducesResponseType(typeof(SucceedResponse<bool>), StatusCodes.Status200OK)]
 public virtual async Task<IActionResult> Upload([FromForm] IFormCollection formCollection)
 {
     if (formCollection == null || formCollection.Files.Count <= 0)
     {
         return Ok(new ErrorResponse<string> { Data = "请选择文件" });
     }
     var fileCollection = (FormFileCollection)formCollection.Files;
     foreach (IFormFile file in fileCollection)
     {
         var fileName = file.FileName;
         var ext = System.IO.Path.GetExtension(fileName);
         using (var memory = new MemoryStream())
         {
             file.CopyTo(memory);
             var buffer = memory.ToArray();
         }
     }
     return Ok(new SucceedResponse<bool> { Data = true });
 }