springBoot+vue+element实现上传功能

上传工具类
public class UploadActionUtil {
	//获取一个路径
    public  final  String location = RuoYiConfig.getProfile();
    public  List<Map<String,Object>> uploadFile(HttpServletRequest request) throws Exception {
        List<Map<String,Object>> list = new ArrayList<>();
        CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(
                request.getSession().getServletContext());
        if (multipartResolver.isMultipart(request)) {
            MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
            Iterator<String> iterator = multiRequest.getFileNames();
            while (iterator.hasNext()) {
                // 取得上传文件
                MultipartFile file = multiRequest.getFile(iterator.next());
                if (file != null) {
                    // 取得当前上传文件的文件名称
                    String myFileName = file.getOriginalFilename();
                    // 如果名称不为“”,说明该文件存在,否则说明该文件不存在
                    if (myFileName.trim() != "") {
                        Map<String,Object>map=new HashMap<>();
                        String fileTyps = myFileName.substring(myFileName.lastIndexOf("."));
                        String tempName = UUID.randomUUID().toString() + fileTyps;
                        // 创建文件夹
                        String folderPath = location + File.separator ;
                        File fileFolder = new File(folderPath);
                        if (!fileFolder.exists() && !fileFolder.isDirectory()) {
                            fileFolder.mkdirs();
                        }
                        File uploadFile = new File(location + "/" + tempName);
                        file.transferTo(uploadFile);
                        map.put("fileUrl",location + "/" + tempName);
                        map.put("fileName",myFileName);
                        list.add(map);
                    }
                }
            }
        }
        return list;
    }
}
前端代码
采用手动上传
<Upload
            ref="upload"
            :format="['jpg','jpeg','png']"
            :with-credentials="false"
            //文件上传之前的钩子函数
            :before-upload="handleUpload"
            :show-upload-list="true"
            //文件上传成功之后的钩子函数
            :on-success="uploadSuccess"
            action
          >
            <Button icon="ios-cloud-upload-outline">选择图片</Button>
          </Upload>
          //file表示将需要上传的文件保存显示出来
          <div v-for="(item, index) in file" :key="index">
            文件: {{ item.name }}
            <Button
              style="margin-left:30px;"
              size="small"
              //是否显示上传按钮
              v-if="uploadFileFlag"
              type="primary"
              //点击上传触发上传方法
              @click="upload"
            >上传</Button>
          </div>
          method:{
          		//上传成功之后回调函数
			    uploadSuccess() {
			      console.log("大事记回调函数");
			    },
			    handleUpload(file) {
			      // 保存需要上传的文件
			      let keyID = Math.random() .toString().substr(2);
			      file["keyID"] = keyID;
			      this.file.push(file);
			      return false;
			    },
			    upload() {
			      // 上传文件
			      if (this.file.length === 0) {
			        this.msgSuccess("未选择上传文件!!");
			        return false;
			      }
			      for (let i = 0; i < this.file.length; i++) {
			        //将数据转换成FormData格式
			        **let fileFormData = new FormData();
			        fileFormData.append("file", this.file[i]);**
			        upload(fileFormData)
			          .then(response => {
			            console.log(response)
			          })
			          .catch(error => {
			            console.log(error);
			          });
			      }
			    },
          }
后端方法
 @PostMapping("/uploadFile")
    public AjaxResult upload(HttpServletRequest httpServletRequest) throws Exception {
        UploadActionUtil uploadActionUtil = new UploadActionUtil();
        List<Map<String, Object>> list = uploadActionUtil.uploadFile(httpServletRequest);
        Map<String, String> returnMap = new HashMap<>();
        String fileId = "";
        for (Map<String, Object> map : list) {
            //生成id
            fileId = IdUtils.fastSimpleUUID();
            map.put("remark", fileId);
            //将文件保存到数据库
            returnMap = bsFileUploadService.saveFile(map);
            returnMap.put("fileId", fileId);
        }
        return AjaxResult.success(returnMap);
    }

功能快捷键

撤销:Ctrl/Command + Z
重做:Ctrl/Command + Y
加粗:Ctrl/Command + B
斜体:Ctrl/Command + I
标题:Ctrl/Command + Shift + H
无序列表:Ctrl/Command + Shift + U
有序列表:Ctrl/Command + Shift + O
检查列表:Ctrl/Command + Shift + C
插入代码:Ctrl/Command + Shift + K
插入链接:Ctrl/Command + Shift + L
插入图片:Ctrl/Command + Shift + G
查找:Ctrl/Command + F
替换:Ctrl/Command + G

Logo

快速构建 Web 应用程序

更多推荐