上传功能-弹窗实现-vue

-引入弹窗页面
	import fileUpload from 'src/page/cuApplyManage/fileUpload.vue';
-页面布局
    <div>
        <fileUpload ref="dialog" @successReload="fileUploadSuccessReload" ></fileUpload>
    </div>
-上传成功后，从上传子页面传值到父页面
	fileUploadSuccessReload(data){
		let acctData = this.acctFormData;
		let dealData = (JSON.stringify(acctData) + JSON.stringify(data)).replace(/{}/, '');
		dealData = JSON.parse(dealData.replace(/}{/, ','));
		this.acctFormData = dealData ;
	}
-按钮打开上传页面
    <el-button type="primary" icon="el-icon-upload" @click="showFileUpload">上传</el-button>
-按钮事件
	showFileUpload(){
		this.$refs.dialog.pvalue = true;
	}

上传功能-页面
<el-upload
	v-show="true"
	accept=".png,.jpg,.pdf"
	ref="upload"
	action="uploadAction"
	:before-upload="beforeUpload"
	:http-request="uploadHttpRequest"
	:file-list="fileList"
	:auto-upload="false"
	:show-file-list="true"
	:multiple="false"
></el-upload>
uploadHttpRequest(param) {//执行上传动作
	var this_ = this;
	const formData = new FormData();
	formData.append('file', param.file);
	const url = this.uploadAction;
	let xhr = new XMLHttpRequest();
	xhr.open('post',url,true);
	xhr.onreadystatechange = function () {
	    if (xhr.readyState == 4) {
	        if (xhr.status == 200 || xhr.status == 0) {
	            this_.onSuccess(JSON.parse(xhr.responseText));
	        }else{
	            this_.onError(xhr.responseText);
	        }
	    }
	}
	xhr.send(formData);
},
doUplaod() {//触发uploadHttpRequest
	this.$refs.upload.submit();
}
onSuccess(response, file, fileList) {
	if (response.code === '000000') {
		let retObj = response.data;
		this.msgSuccess(response.msg);
		this.$emit('successReload',retObj);//返回值到父页面
		this.closeDialog();
	} else {
		this.msgError(response.msg);
	}
}

　　

上传功能-后端
@RequestMapping(value = "/uploadFileTest")
public ResultEntity uploadFileTest(@RequestParam("file") MultipartFile file) {
    logger.info("接收到的文件数据为：" + file);
    ResultEntity re = new ResultEntity();
    Map<String, Object> retMap = null;
    if (file.isEmpty()) {
        re.setMsg("上传文件为空");
        return re;
    }
    String fileName = file.getOriginalFilename();
    logger.info("上传文件名:" + fileName);
    logger.info("文件上传路径:" + fileUploadLocale);
    String suffixName = fileName.substring(fileName.lastIndexOf("."));
    String prefixName = fileName.substring(0, fileName.lastIndexOf("."));
    try {
        File dest0 = new File(fileUploadLocale);
        File dest = new File(fileUploadLocale ,
                prefixName+"-"+ ToolDateTime.getDate(ToolDateTime.PATTERN_YMDHMS)+suffixName);
        // 检测是否存在目录
        logger.info("上传文件保存名称:" + dest.getName());
        if (!dest0.exists()) {
            dest0.mkdirs();
        }
        file.transferTo(dest);
        retMap = new HashMap<String, Object>();
        retMap.put("bankFileName",dest.getName());
        retMap.put("bankFile",dest.getAbsolutePath());
        re.data(retMap).ok();
    } catch (Exception e) {
        logger.error("文件上传错误",e);
        re.setMsg("上传文件失败");
    }
    return re;
}

　　

-引入弹窗页面import fileUpload from 'src/page/cuApplyManage/fileUpload.vue';-页面布局    <div>        <fileUpload ref="dialog" @successReload="fileUploadSuccessReload" ></fileUpload>    </div>-上传成功后，从上传子页面传值到父页面fileUploadSuccessReload(data){let acctData = this.acctFormData;let dealData = (JSON.stringify(acctData) + JSON.stringify(data)).replace(/{}/, '');dealData = JSON.parse(dealData.replace(/}{/, ','));this.acctFormData = dealData ;}-按钮打开上传页面    <el-button type="primary" icon="el-icon-upload" @click="showFileUpload">上传</el-button>-按钮事件showFileUpload(){this.$refs.dialog.pvalue = true;}
上传功能-页面<el-uploadv-show="true"accept=".png,.jpg,.pdf"ref="upload"action="uploadAction":before-upload="beforeUpload":http-request="uploadHttpRequest":file-list="fileList":auto-upload="false":show-file-list="true":multiple="false"></el-upload>uploadHttpRequest(param) {//执行上传动作var this_ = this;const formData = new FormData();formData.append('file', param.file);const url = this.uploadAction;let xhr = new XMLHttpRequest();xhr.open('post',url,true);xhr.onreadystatechange = function () {    if (xhr.readyState == 4) {        if (xhr.status == 200 || xhr.status == 0) {            this_.onSuccess(JSON.parse(xhr.responseText));        }else{            this_.onError(xhr.responseText);        }    }}xhr.send(formData);},doUplaod() {//触发uploadHttpRequestthis.$refs.upload.submit();}onSuccess(response, file, fileList) {if (response.code === '000000') {let retObj = response.data;this.msgSuccess(response.msg);this.$emit('successReload',retObj);//返回值到父页面this.closeDialog();} else {this.msgError(response.msg);}}上传功能-后端@RequestMapping(value = "/uploadFileTest")public ResultEntity uploadFileTest(@RequestParam("file") MultipartFile file) {    logger.info("接收到的文件数据为：" + file);    ResultEntity re = new ResultEntity();    Map<String, Object> retMap = null;    if (file.isEmpty()) {        re.setMsg("上传文件为空");        return re;    }    String fileName = file.getOriginalFilename();    logger.info("上传文件名:" + fileName);    logger.info("文件上传路径:" + fileUploadLocale);    String suffixName = fileName.substring(fileName.lastIndexOf("."));    String prefixName = fileName.substring(0, fileName.lastIndexOf("."));    try {        File dest0 = new File(fileUploadLocale);        File dest = new File(fileUploadLocale ,                prefixName+"-"+ ToolDateTime.getDate(ToolDateTime.PATTERN_YMDHMS)+suffixName);        // 检测是否存在目录        logger.info("上传文件保存名称:" + dest.getName());        if (!dest0.exists()) {            dest0.mkdirs();        }        file.transferTo(dest);        retMap = new HashMap<String, Object>();        retMap.put("bankFileName",dest.getName());        retMap.put("bankFile",dest.getAbsolutePath());        re.data(retMap).ok();    } catch (Exception e) {        logger.error("文件上传错误",e);        re.setMsg("上传文件失败");    }    return re;}