上传功能-弹窗实现-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;}

巴特西

上传功能-弹窗实现-vue

最新文章

热门文章