【uniApp】uni-file-picker 实现文件上传

// templete
<uni-file-picker v-model="fileList" :limit="1" file-mediatype="image" :sourceType="['album', 'camera']" :image-styles="imageStyle" @select="uploadFile" ></uni-file-picker>
1
2

export default {
	data() {
		fileList: [],
		imageStyle: {
			"height": 120,	// 边框高度
			"width": 120,	// 边框宽度
			"border":{ // 如果为 Boolean 值，可以控制边框显示与否
				"color":"#eee",		// 边框颜色
				"width":"1px",		// 边框宽度
				"style":"solid" 	// 边框样式
			}
		}
	},
	methods: {
		uploadFile(e){
			this.fileList.push(e.tempFiles[0])
			uni.uploadFile({
			 	url: '/addFile', // 替换为你的上传API地址
		 	   filePath: e.tempFilePaths[0], // 附件路径
			   name: 'file',
			   formData: {}, // 可加入表单内其他参数
			   success: (res) => { //成功回调
			    const result = JSON.parse(res.data) // 成功回调返回结果
			   },
			   fail: (error) => { //失败回调
			   	console.log(error)
			   }		
			})
		}
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31