二，文件上传控件el-upload

需求： 上传文件，保存到服务器，并保存历史记录

上效果图

　

      <el-form-item label="文件">
        <el-upload
          ref="uploadHarnessDrawing"
          v-loading="loadingFile"
          action=""
          :limit=""
          :on-preview="handlePreview"
          :on-change="onHarnessDrawingFileChange"
          :on-remove="onHarnessDrawingFileRemove"
          :file-list="harnessDrawingFileList"
          :auto-upload="false"
        >
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        </el-upload>
      </el-form-item>

el-upload 为Element上传控件，需要注意的以下三个事件，分别为预览，Change以及删除，change和remove直接修改file-list属性

:on-preview="handlePreview"
:on-change="onHarnessDrawingFileChange"
:on-remove="onHarnessDrawingFileRemove"
:file-list="harnessDrawingFileList"

onHarnessDrawingFileChange(file, fileList) {
      this.harnessDrawingFileList = fileList
    },
    onHarnessDrawingFileRemove(file, fileList) {
      this.harnessDrawingFileList = fileList
    },
    handlePreview(file) {
      var url = file.url
      if (url === undefined) {
        return
      }
      this.viewFile(url)
    },
    viewFile(url) {
      var param = {
        token: getToken(),
        url: url
      }
      this.loadingFile = true
      fileDownload(param).then(res => {
        if (res.code === 20000) {
          downloadFile(res.data.name, res.data.dataStr)
          this.loadingFile = false
        }
      })
    }

这么做的原因是功能不使用自带的提交功能，而是使用按钮统一提交，并且在后台判断文件修改

提交事件

submitUpload() {
      this.loading = true
      this.uploadForm = new FormData()
      this.uploadForm.append('id', this.id)
      this.uploadForm.append('token', this.token)
      this.uploadForm.append('comment', this.temp.Comment === undefined ? '' : this.temp.Comment)
      var config = {
        // 这里是重点，需要和后台沟通好请求头，Content-Type不一定是这个值
        headers: { 'Content-Type': 'multipart/form-data' }
      }
      for (var i = 0; i < this.harnessDrawingFileList.length; i++) {
        this.uploadForm.append('harnessDrawingFileList', this.harnessDrawingFileList[i].raw)
        if (this.harnessDrawingFileList[i].raw === undefined) {
          // 初始文件
          this.uploadForm.append('initialHarnessDrawingFileList', this.harnessDrawingFileList[i].url)
        }
      }
      // 添加请求头
      axios.post(this.baseURL + '/ProjectManager/uploadFile', this.uploadForm, config).then(response => {
        this.loading = false
        if (response.data.code !== 20000) {
          MessageBox.alert(response.data.msg)
          return
        }
        this.innerVisible = false
        this.$notify({
          title: '成功',
          message: response.data.msg,
          type: 'success',
          duration: 2000
        })
        this.$emit('refreshTable')
      })
    }

后台代码：

/// <summary>
        /// 上传文件
        /// </summary>
        /// <param name="id">Id</param>
        /// <param name="token">登录Token</param>
        /// <returns></returns>
        [HttpPost]
        public HttpResponseMessage uploadElectricalEngineerFile()
        {
            // 返回数据
            String result = String.Empty;
            String tempUploadPath = String.Empty;
            String tempUploadDatePath = String.Empty;
            try
            {
                String msg = String.Empty;
                String token = HttpContext.Current.Request.Form["token"];
                LoginUser loginUser = GetCurrentLoginUser(token);
                tempUploadPath = HttpContext.Current.Request.MapPath(String.Format("/upload/Temp/{0}/", loginUser.Uid));
                tempUploadDatePath = tempUploadPath + DateTime.Now.ToString("yyyyMMddHHmmss") + "/";
                String taskId = HttpContext.Current.Request.Form["id"];
                String comment = HttpContext.Current.Request.Form["comment"] == null ? "" : HttpContext.Current.Request.Form["comment"];
                HttpFileCollection files = HttpContext.Current.Request.Files;
                // 文件夹信息获取，根据项目名 命名
                String path = HttpContext.Current.Request.MapPath("/upload/");
                TaskDomain task = TaskBiz.GetById(taskId);
                TechnicalSupportDomain techDomain = null;
                if (task == null)
                {
                    AppLog.Error(Constant.MSG_NO_TASK_DATA);
                    return JsonResultModel(Result_Success_Error, Constant.MSG_NO_TASK_DATA, result);
                }
                techDomain = TechnicalSupportBiz.GetById(task.MasterId);
                if (techDomain == null)
                {
                    AppLog.Error(Constant.MSG_NO_SOURCE_DATA);
                    return JsonResultModel(Result_Success_Error, Constant.MSG_NO_SOURCE_DATA, result);
                }
                ContractDomain contract = pjService.GetContractById(techDomain.ContractId); //ContractBiz.GetById(techDomain.ContractId);
                path = String.Format("/upload/{0}/{1}/{2}", contract.CustomerName, contract.ProjectName, Constant.FILE_PATH_TECHNICAL_SUPPORT);
                msg = String.Format("用户【{0}】为项目【{1}】", loginUser.User.FullName, contract.ProjectName);
                // 把所有的文件保存到临时文件夹中，在临时文件夹操作
                String initialHarnessDrawingFileFileList = HttpContext.Current.Request.Form["initialHarnessDrawingFileList"] == null ? "" : HttpContext.Current.Request.Form["initialHarnessDrawingFileList"];
                List<String> lsInitialHarnessDrawingFileFile = new List<String>(initialHarnessDrawingFileFileList.Split(",".ToCharArray(), StringSplitOptions.RemoveEmptyEntries));
                // 判断文件是否变更
                GetElectricalEngineerFileInfo(techDomain);
                List<String> harnessDrawingFiles = techDomain.HarnessDrawingFiles.Select(p => p.url).ToList();
                // 文件是否变更
                techDomain.HarnessDrawingFileChange = lsInitialHarnessDrawingFileFile.All(harnessDrawingFiles.Contains) && harnessDrawingFiles.All(lsInitialHarnessDrawingFileFile.Contains) && lsInitialHarnessDrawingFileFile.Count == harnessDrawingFiles.Count;
                // 没有改变
                if (techDomain.HarnessDrawingFileChange && files.AllKeys.Length == )
                {
                    return JsonResultModel(Result_Success_Code, Result_Success_MSG, result);
                }
                List<String> deleteFileInfo = new List<String>();
                // 找出删除的文件
                List<String> list = harnessDrawingFiles.Except(lsInitialHarnessDrawingFileFile).ToList();
                if (list != null && list.Count > )
                {
                    list.ForEach(item =>
                    {
                        deleteFileInfo.Add(String.Format("文件{0}", Path.GetFileName(item)));
                    });
                }
                // 把现有的文件保存到临时文件夹中
                if (!Directory.Exists(tempUploadDatePath + "HarnessDrawing/"))
                {
                    Directory.CreateDirectory(tempUploadDatePath + "HarnessDrawing/");
                }
                for (int iIndex = ; iIndex < lsInitialHarnessDrawingFileFile.Count; iIndex++)
                {
                    FileInfo file = new FileInfo(HttpContext.Current.Request.MapPath(lsInitialHarnessDrawingFileFile[iIndex]));
                    file.CopyTo(tempUploadDatePath + "HarnessDrawing/" + file.Name);
                }
                String fileName = String.Empty;
                for (int iIndex = ; iIndex < files.AllKeys.Length; iIndex++)
                {
                    HttpPostedFile postedFile = files[iIndex];
                    fileName = System.IO.Path.GetFileName(postedFile.FileName);
                    switch (files.AllKeys[iIndex])
                    {
                        case Constant.FILE_HARNESSDRAWING_LIST:
                            postedFile.SaveAs(tempUploadDatePath + "HarnessDrawing/" + fileName);
                            break;
                    }
                }
                // 获取最终的文件
                DirectoryInfo dir = new DirectoryInfo(tempUploadDatePath + "HarnessDrawing/");
                List<FileInfo> lastedHarnessDrawingFiles = dir.GetFiles().ToList();

                // 上传文件
                String filePath = String.Empty;
                String bakDate = DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss");
                String versionName = DateTime.Now.ToFileTimeUtc().ToString();
                String versionPath = String.Empty;
                List<String> fileInfoList = new List<String>();
                // 文件
                techDomain.HarnessDrawing = String.Empty;
                filePath = path + String.Format("/{0}/", Constant.FILE_PATH_HARNESSDRAWING);
                foreach (FileInfo file in lastedHarnessDrawingFiles)
                {
                    fileName = file.Name;
                    if (!Directory.Exists(filePath))
                    {
                        Directory.CreateDirectory(filePath);
                    }
                    versionPath = filePath + versionName + "/";
                    techDomain.HarnessDrawing = versionPath;
                    fileInfoList.Add(String.Format(" 文件：{0}", fileName));
                    // 备份文件
                    versionPath = HttpContext.Current.Request.MapPath(versionPath);
                    if (!Directory.Exists(versionPath))
                    {
                        Directory.CreateDirectory(versionPath);
                    }
                    file.CopyTo(versionPath + fileName);
                }
                // 写入Log
                if (lastedHarnessDrawingFiles.Count > )
                {
                    CommonMethod.WriteVersionLog(HttpContext.Current.Request.MapPath(filePath) + Constant.VERSION_LOG_NAME, String.Format("{0}|{1}|{2}", bakDate, versionName, comment));
                }
                techDomain.TaskId = taskId;
                result = pjService.SaveElectricalEngineerTaskInfo(techDomain, loginUser);
                if (!String.IsNullOrEmpty(result))
                {
                    AppLog.Error(result);
                    return JsonResultModel(Result_Success_Error, result, null);
                }
                if (deleteFileInfo.Count > )
                {
                    msg += String.Format("删除了{0}", String.Join(",", deleteFileInfo));
                }
                if (fileInfoList.Count > )
                {
                    msg += String.Format("上传了{0}", String.Join(",", fileInfoList));
                }
                LogHelper.LogOperate(msg, Constant.OPEARTE_LOG_INFO, loginUser);
            }
            catch (Exception ex)
            {
                AppLog.Error(ex);
                return JsonResultModel(Result_Success_Error, ex.Message, result);
            }
            finally
            {
                if (!String.IsNullOrEmpty(tempUploadPath))
                {
                    // 删除临时文件夹
                    CommonMethod.DeleteDirectory(tempUploadPath, tempUploadDatePath.TrimEnd('/'));
                }
            }

            return JsonResultModel(Result_Success_Code, Result_Success_MSG, result);
        }

自此，文件上传功能完成