使用uniapp做文件上传的时候，可以使用系统提供的接口进行文件上传

前端部分

前端组件代码

使用的是uview的上传组件

  • 01
  • 02
  • 03
  • 04
  • 05
    <u-upload id="selectPhoto" :style="{display:selectPhotoDisplay}" :useBeforeRead="true"
		@afterRead="afterRead" @delete="deletePic" name="1" multiple accept="image" uploadText="图片"
		:maxCount="9" :maxSize="10 * 1024 * 1024" @oversize="overSize" :previewFullImage="false"
		:show-upload-list="false" :auto-upload="false">
	</u-upload>

需要注意的点：

1、filePath 对应的是本地blod对象的地址
2、name 对应的是后台接收file对象的名称
3、resolve里面的url用来回显图像

  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
const baseUrl = config.baseUrl;
	 return new Promise((resolve, reject) => {
			resolve({
			  url: url
			})

			let a = uni.uploadFile({
				url: baseUrl + '/file/upload',  
				filePath: url,
				name: "files",
				formData: {
				     file: url
				 	 },
				headers: {
						'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundaryXkII0NmP1jsvIgZC'
					},
					success: (res) => {
					  let data = JSON.parse(res.data)
					resolve(data.msg)
						}
					});
				})

后端代码

  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
@PostMapping("/file/upload")
public AjaxResult upload(@RequestParam("files") MultipartFile file) {

...具体实现逻辑省略

}