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

原创

已于 2024-07-29 01:52:42 修改 · 649 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #状态模式 #文件上传

于 2024-07-28 01:40:27 首次发布

使用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",