最近在做一個需求，使用uniapp上傳用戶頭像。后端會有一個處理上傳圖片返回圖像鏈接的接口。在uniapp官網(wǎng)關于上傳的組件有兩個：

（1）uni.uploadFile（object）

（2）uni-file-picker

如果使用uni.uploadFile,前端的代碼大致可以這樣寫：

uni.chooseImage({
	success: (chooseImageRes) => {
		const tempFilePaths = chooseImageRes.tempFilePaths;
		uni.uploadFile({
			url: 'https://www.example.com/upload', //僅為示例，非真實的接口地址
			filePath: tempFilePaths[0],
			name: 'file',
			formData: {
				'user': 'test'
			},
			success: (uploadFileRes) => {
				console.log(uploadFileRes.data);
			}
		});
	}
});

這是官網(wǎng)給出的范例。對應的HTML：

<view class="avatar" @click="Imageupload">頭像上傳</view>

<script>
...
methods:{
Imageupload(){
    uni.chooseImage(){
     ....
   }

}
}

</script>

然后就是 自己寫樣式了。不過還要寫圖片回顯的函數(shù)，不然不能看到圖片上傳的效果，還是挺麻煩的。

所以，為了方便，我用的是uni-file-picker+uni.uploadFile組合。也算是偷懶的方法吧。

<uni-forms-item label="選擇頭像" name="avatar" labelWidth="90">
<uni-file-picker limit="1" :del-icon="false" disable-preview :imageStyles="imageStyles"file-mediatype="image" :auto-upload="false" @select="upload">選擇</uni-file-picker>
</uni-forms-item>


...

<script>
		upload(e) {
				const tempFilePaths = e.tempFilePaths;//e是獲取的圖片源
				uni.uploadFile({
					url: 'http://localhost:9191/files/upload', //上傳圖片的后端接口
					filePath: tempFilePaths[0],
					name: 'file',
					success: res => {
						this.formData.avatar = res.data
						console.log(this.formData.avatar, "頭像")
					}
				})
			}
</script>

當然我這個是一種偷懶的方法，要學東西還是要深入的去了解其所以然。?文章來源地址http://www.zghlxwxcb.cn/news/detail-517880.html

到了這里，關于uni-file-picker上傳圖片到后端服務器并存入數(shù)據(jù)庫的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！