vue el-upload 手动上传附件

<template>
    <div class="casualtiesEdit">
		<div class="position_form">
			<div class="scroll-content" :style="'overflow-x: hidden;'">
				<div class="scroll-item">
				 <el-upload
                    class="upload-demo"
                    ref="upload"
                    :show-file-list="true"
                    :action="actionUrl"
                    :http-request="httpRequest"
                    :multiple="isMulti"
                    :before-upload="beforeUpload"
                    :before-remove="beforeRemove"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :on-success="onSuccess"
                    :on-error="onError"
                    :on-exceed="onExceed"
                    :file-list="fileList"
                    :limit="limitNum"
                    :accept="acceptFile"
                    :with-credentials="true"
                    :auto-upload="false">
                    <el-button slot="trigger" size="small" type="primary" icon="el-icon-folder-opened">选取文件</el-button>
                    <el-button size="small" type="primary" icon="el-icon-upload" @click="submitUpload">上传</el-button>
                 </el-upload>
				</div>
			</div>
		</div>
		<div class="edit_btn el-fomr position_btn">
			<el-button type="primary" class="btn_close" @click="cancel">取消</el-button>
			<el-button type="primary" @click="confirm" >确定</el-button>
		</div>
	</div>
</template>
<script>
import {uploadFile} from "@/api/schedule/common.js";
export default{
  data() {
    return {
      reload: true,
      tabIndex: "0",
      contentStyleObj: {
        height: "670px",
      },
      actionUrl:"",//附件上传地址
      fileList:[],//附件上传列表显示
      isMulti:false,//是否可上传多个附件
      acceptFile:".*",//支持上传的文件类型 默认全部文件 多个格式文件逗号分割 示例 .pdf,.jpg
      limitNum:1,//最大上传附件数 默认1 单选附件
      filesInfo:""//上传成功的附件
    };
  },
  mounted(){
    if(process.env.NODE_ENV == "development"){
        this.actionUrl="http://localhost:5010/api/File/UploadFile";
    }
    else{
        this.actionUrl="/api/File/UploadFile";
    }    
    var multiPar=this.publicFun.GetQueryString("isMulti");//是否多选选择
    var limit=this.publicFun.GetQueryString("limit");//最大上传附件数
    var acceptPar=this.publicFun.GetQueryString("accept");//文件上传附件类型限制
    if(multiPar){
        this.isMulti=multiPar;
    }
    if(limit){
        this.limitNum=limit;
    }
    if(acceptPar){
        this.acceptFile=acceptPar;
    }
  },
  methods:{
    //上传附件至服务器
    submitUpload() {
      console.log("uploadfile operation");
      this.$refs.upload.submit();
    },
    //文件上传之前
    beforeUpload(file){
    },
    //文件上传成功事件(auto-upload=true时调用)
    onSuccess(response, file, fileList){
        console.log("uploadfile success:",response);
    },
    //文件上传失败事件(auto-upload=true时调用)
    onError(err, file, fileList){
        console.log("uploadfile error",err);
    },
    //文件超出个数限制时的钩子
    onExceed(files, fileList){
        var alerMsg=`当前限制选择${this.limitNum}个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`;
        this.$notify({
            title: "警告",
            message: alerMsg,
            type: "warning",
        });
    },
    //移除之前操作
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    //删除附件操作
    handleRemove(file, fileList) {
       //如果有上传附件且回传的，那么删除返回的数据
       if(this.filesInfo){
            console.log("remove file");
            var jsonFile=JSON.parse(this.filesInfo);
            jsonFile=jsonFile.filter(i=>i.FileName!=file.name);
            if(jsonFile.length>0){
              this.filesInfo=JSON.stringify(jsonFile);
            }
            else{
              this.filesInfo="";
            }
            console.log("after remove file：",jsonFile);
        }
    },
    handlePreview(file) {
      console.log(file);
    },
    //上传附件请求
    httpRequest(content){
       console.log("file content:",content);
        const formdata=new FormData();
        formdata.append("File",content.file);
		//调用接口实现附件上传 此处仅为示例，根据实际业务需要写代码
        uploadFile(formdata).then((res)=>{
            console.log("uploadfile response：",res.data);
            if(res.data){
                this.filesInfo=res.data;
                //更新附件上传状态
                this.$refs.upload.uploadFiles.forEach((item)=>{
                  item.status="success";
                });
            }
             this.$notify({
                title: "成功",
                message: "上传成功",
                type: "success",
            });
        });
    },
    //确定返回
    confirm(){
      window.parent._closeDialog({
        success: "关闭",
        fileInfo:this.filesInfo
      });
    },
    //取消
    cancel() {
      window.parent._closeDialog({
        success: "关闭",
        fileInfo:""
      });
    },
  }
}
</script>