自学Ant Design Vue 第二节Upload上传组件的使用

前后端分离需要注意一下调用上传方法的路径

前端代码:

<template>
 <div>
 <div>
 <h3>点击上传附件</h3>
 <a-upload
 name="file"
 :multiple="true"
 :action="url.fileUpload"
 :headers="headers"
 @change="handleChange">
 <a-button><a-icon type="upload" />点击上传</a-button>
 </a-upload>
 </div>
 <div>=======================</div>
 <div class="clearfix">
 <h2>拖拽或者点击上传附件</h2>
 <a-upload
 :action="url.fileUpload"
 listType="picture-card"
 :fileList="fileList"
 :headers="headers"
 @preview="handlePreview2"
 @change="handleChange2"
 >
 <div v-if="fileList.length < 3">
 <a-icon type="plus" />
 <div class="ant-upload-text">Upload</div>
 </div>
 </a-upload>
 <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
 <img alt="example" style="width: 100%" :src="previewImage" />
 </a-modal>
 </div>
 </div>
</template>
<script>
 import Vue from 'vue'
 import { ACCESS_TOKEN } from "@/store/mutation-types"
 export default {
 data () {
 return {
 headers: {
 },
 url: {
 //后端访问数据地址
 fileUpload: window._CONFIG['domianURL']+"/sys/common/upload"
 },
 previewVisible: false,
 previewImage: '',
 fileList: [],
 }
 },
 created () {
 const token = Vue.ls.get(ACCESS_TOKEN);
 this.headers = {"X-Access-Token":token}
 },
 methods: {
 handleChange(info) {
 if (info.file.status !== 'uploading') {
 console.log(info.file, info.fileList);
 }
 if (info.file.status === 'done') {
 this.$message.success(`${info.file.name} 文件上传成功`);
 } else if (info.file.status === 'error') {
 this.$message.error(`${info.file.name} 文件上传失败`);
 }
 },
 handleCancel () {
 this.previewVisible = false
 },
 handlePreview2 (file) {
 this.previewImage = file.url || file.thumbUrl
 this.previewVisible = true
 },
 handleChange2 ({ fileList }) {
 this.fileList = fileList
 },
 },
 }
</script>

后台代码：

@RequestMapping(value = "/upload", method = RequestMethod.POST)
	public Result<SysUser> upload(HttpServletRequest request, HttpServletResponse response) {
		Result<SysUser> result = new Result<>();
		try {
			String ctxPath = "D://upFiles";
			String fileName = null;
			String bizPath = "user";
			String nowday = new SimpleDateFormat("yyyyMMdd").format(new Date());
			File file = new File(ctxPath + File.separator + bizPath + File.separator + nowday);
			if (!file.exists()) {
				file.mkdirs();// 创建文件根目录
			}
			MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
			MultipartFile mf = multipartRequest.getFile("file");// 获取上传文件对象
			String orgName = mf.getOriginalFilename();// 获取文件名
			fileName = orgName.substring(0, orgName.lastIndexOf(".")) + "_" + System.currentTimeMillis() + orgName.substring(orgName.indexOf("."));
			String savePath = file.getPath() + File.separator + fileName;
			File savefile = new File(savePath);
			FileCopyUtils.copy(mf.getBytes(), savefile);
			String dbpath = bizPath + File.separator + nowday + File.separator + fileName;
			if (dbpath.contains("\\")) {
				dbpath = dbpath.replace("\\", "/");
			}
			result.setMessage(dbpath);
			result.setSuccess(true);
		} catch (IOException e) {
			result.setSuccess(false);
			result.setMessage(e.getMessage());
			e.printStackTrace();
		}
		return result;
	}
@GetMapping(value = "/view/**")
	public void view(HttpServletRequest request, HttpServletResponse response) {
		// ISO-8859-1 ==> UTF-8 进行编码转换
		String imgPath = extractPathFromPattern(request);
		// 其余处理略
		InputStream inputStream = null;
		OutputStream outputStream = null;
		try {
			imgPath = imgPath.replace("..", "");
			if (imgPath.endsWith(",")) {
				imgPath = imgPath.substring(0, imgPath.length() - 1);
			}
			response.setContentType("image/jpeg;charset=utf-8");
			String localPath = uploadpath;
			String imgurl = localPath + File.separator + imgPath;
			inputStream = new BufferedInputStream(new FileInputStream(imgurl));
			outputStream = response.getOutputStream();
			byte[] buf = new byte[1024];
			int len;
			while ((len = inputStream.read(buf)) > 0) {
				outputStream.write(buf, 0, len);
			}
			response.flushBuffer();
		} catch (IOException e) {
			log.info("预览图片失败" + e.getMessage());
			// e.printStackTrace();
		} finally {
			if (inputStream != null) {
				try {
					inputStream.close();
				} catch (IOException e) {
					e.printStackTrace();
				}
			}
			if (outputStream != null) {
				try {
					outputStream.close();
				} catch (IOException e) {
					e.printStackTrace();
				}
			}
		}
	}