uniapp+vant weapp实现图片上传前预览功能

最新推荐文章于 2024-08-27 19:51:04 发布

Kätzchen-408

最新推荐文章于 2024-08-27 19:51:04 发布

阅读量1.7k

点赞数

分类专栏：前端文章标签： uniapp 前端小程序

本文链接：https://blog.csdn.net/weixin_45842078/article/details/117447812

版权

本文介绍了如何在uniapp项目中结合vant weapp组件，实现图片上传前的本地预览功能。重点在于通过修改组件，确保在发布帖子时，能先预览图片数量并一次性上传。

摘要由CSDN通过智能技术生成

在社区功能中,想要发布一个帖子,那么最好在本地预览得到图片数量然后通过循环一次上传,而不是直接上传.这里对组件进行了一些修改.
html:

<van-uploader 
:disabled="disable" 
:file-list="previewList" 
@after-read="previewImg" 
max-count="9" />

js:

	data() {
   
			return {
   
			
				text: "",
				school: "",
				disable: true,
				postId: "",
				fileList: [],
				previewList: [],
				imgId: 0,
				file: null
			}
		},
		methods:{
   	
		previewImg(e) {
   
				const {
   
					previewFile
				} = e.detail
				this.previewList.push({
   
					...previewFile,
					url: e.detail.file.url
				})
			},
				submit() {
   
				wx.showLoading({
   
					title: "开始上传..."
				})
				let self = this
				uni.request({
   
					url: getApp().globalData.baseURL + "/post/addAPost",
					data: {
   
						"openid": wx.getStorageSync('openid'),
						"school": self.school,
						"content": self.text
					},
					header: {
   
						"token": wx.getStorageSync('token')
					},
					success: (res) => {
   
						let self = this
						self.postId = res.data.data
						let length = self.previewList.length
						if (length !== 0) {
   
							for (let i = 0; i < length; i++) {
   
								wx.uploadFile({
   
									url: getApp().globalData.baseURL + "/post/addAPostImage",
									filePath: self.previewList[i].url,
									name: "file",
									formData: {
   
										"file": self.previewList[i],
										"imageId": i,
										"postId": self.postId
									},
									header: {
   
										"token": wx.getStorageSync('token')
									},
									success: (res) => {
   
										self.fileList.push({
   
											...self.previewList[i],
											url: res.data
										});
										if (self.previewList.