uniapp文件上传前后端代码展示

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

前端部分

前端组件代码

使用的是uview的上传组件

<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用来回显图像

const baseUrl = config.baseUrl;
	 return new Promise((resolve, reject) => {
	 //这个位置的代码要注释掉 不然会影响异步调用的同步性，这个是设置返回值的 设置了之后 会立即返回 接收到的是一个blob对象 导致异步失败
			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)
						}
					});
				})

后端代码

@PostMapping("/file/upload")
public AjaxResult upload(@RequestParam("files") MultipartFile file) {

...具体实现逻辑省略

}