uview 文件上传

### uView 文件上传 使用方法 示例代码 uView 是一个基于 UniApp 的 UI 框架，提供了丰富的组件和功能来简化开发流程。对于文件上传的功能，uView 提供了 `u-upload` 组件[^4]，该组件能够轻松实现图片或文件的上传功能，并且支持自定义配置。 以下是一个使用 `u-upload` 组件实现文件上传的完整示例代码： #### 前端代码（UniApp + uView） ```html <template> <view class="container"> <!-- 文件上传组件 --> <u-upload :action="uploadUrl" :file-list="fileList" @on-success="handleSuccess" :max-count="15" :custom-btn="true"> <view slot="addBtn" class="upload-btn">点击上传</view> </u-upload> <view class="text-9B9B9B">图片宽度和高度都不能低于500像素，至少3张，最多15张！</view> </view> </template> <script> export default { data() { return { uploadUrl: 'https://your-backend-api.com/file/upload', // 后端接口地址 fileList: [] // 已上传文件列表 }; }, methods: { handleSuccess(res, index, lists) { console.log('上传成功回调', res, index, lists); // 处理上传成功的逻辑，例如将返回的文件 URL 存储到数据库中 } } }; </script> <style scoped> .upload-btn { background-color: #2979ff; color: #ffffff; padding: 10px 20px; border-radius: 5px; text-align: center; } </style> ``` #### 后端代码（Java - 若依框架） 后端部分可以参考若依框架的文件上传接口实现[^2]。以下是一个简单的 Java 实现示例： ```java import org.springframework.web.bind.annotation.*; import org.springframework.web.multipart.MultipartFile; @RestController @RequestMapping("/file") public class FileController { @PostMapping("/upload") public AjaxResult upload(@RequestParam("files") MultipartFile file) { try { // 获取上传文件路径 String filePath = RuoYiConfig.getUploadPath(); // 执行文件上传并返回新文件名称 String fileName = FileUploadUtils.upload(filePath, file); // 构造完整的文件访问 URL HttpServletRequest request = ServletUtils.getRequest(); String urlInfo = request.getRequestURL().toString().replace(request.getRequestURI(), ""); String urlFinal = urlInfo + fileName; AjaxResult ajax = AjaxResult.success(); ajax.put("url", urlFinal); ajax.put("fileName", fileName); ajax.put("newFileName", FileUtils.getName(fileName)); ajax.put("originalFilename", file.getOriginalFilename()); return AjaxResult.success(ajax.get("fileName")); } catch (Exception e) { return AjaxResult.error(e.getMessage()); } } } ``` ### 注意事项 1. 确保前端 `uploadUrl` 地址与后端接口地址一致。 2. 如果需要限制文件大小、类型等，可以在 `u-upload` 组件中通过属性进行配置，例如 `max-size` 和 `mime-type`[^4]。 3. 后端接口需正确处理文件上传逻辑，包括文件存储路径、命名规则以及返回结果格式。 ---