uni-app H5 上传图片

• uni-app H5 上传图片
• • 环境
  • 前端代码
  • 预览PDF / 图片
  • 后端接口部分代码 Java

uni-app
uView2.x - 表单组件 Upload 上传

假设分为 新增、编辑、预览、三个操作，则代码实现略有不同
1.仅新增时，初始数据为空、图片文件列表也为空，对源码无需做何修改
2.仅编辑时，初始化需要加载图片列表，加载和上传时需注意 fileList2 中图片地址的问题（如果数据库始终保存完整地址，也无需考虑，请视情况而定）
3.仅预览时，upload组件需隐藏上传按钮、设置maxCount长度、添加disabled属性

当“photoUrl”同时保存PDF文件地址或图片地址时
需要预览PDF，要对后端返回的数据进行判断（此处没有预览PDF相关的代码，需要的话可以留言，实现方式有点low哈，可以交流一下）

						//pdf和图片只能有一种，图片可多张，pdf文件仅可上传一个
						if (!this.isNull(data.photoUrl)){
							//判断是jpg还是pdf
							var isPDF = false
							//路径
							let tempPassportUrl = data.photoUrl.split(';')
							if(tempPassportUrl[0].split(".")[1] == 'PDF' || tempPassportUrl[0].split(".")[1] == 'pdf'){
								isPDF = true
								data.maxCount = 0
							} else {
								data.maxCount = tempPassportUrl.length
							}
							//迭代封装url组合成完整的url
							for(var i = 0; i < tempPassportUrl.length; i++){
								let url = tempPassportUrl[i]
								//获取name
								let splitArray = url.split('/')
								let name = splitArray[splitArray.length - 1]
								if(isPDF){
									this.pdfName = name
									this.pdfUrl = this.$ftpUrl+url
								}else{
									this.fileList1.push({name: name, 
														url: this.$ftpUrl+url, 
														saveUrl: url})
								}
							}
						}

这里没有贴完整代码哈，公司实现方式不一样，所以不一定用得到，看一下后端参数类型就行了

	
    @PostMapping("/uploadFiles.api")
    @ApiIgnore
    public Rest uploadFiles(final MultipartFile file){
        Rest rest = new Rest();
        try{
            String path = "/fileservice/passport/img/";
            String fileUrl = file.getOriginalFilename();
            //拼接文件名：时间戳+文件后缀名
            fileUrl = System.currentTimeMillis() + fileUrl.substring(fileUrl.lastIndexOf("."));
            //FTPUtils 自定义文件上传工具类
            boolean isOk = FTPUtils.uploadFile(path, fileUrl, file);
            if(isOk){
                rest.setData(path + fileUrl);
            }else{
                rest.setSuccess(false);
                rest.setMessage("上传文件失败");
                rest.setErrCode("0001");
            }
        }catch (Exception e){
            rest.setSuccess(false);
            rest.setMessage(e.getMessage());
            return rest;
        }
        return rest;
    }

以下是本文全部内容，感谢查看！
欢迎参考，感谢指正！