uniapp中上传图片并实时预览

这里只做记录,详细的api请看官方文档
html

<view class="pop-contain">
	<scroll-view scroll-y class="item-contain">
		<view class="padding-sm">
			
			<img class="paidImgCon" :src="paidImgUrl">
			<view class="paid-btn" v-if="paidImgUrl==''" @click="insertImage">
				上传
			view>
			<view class="paid-btn" v-else @click="insertImage">
				更新
			view>
		view>
	scroll-view>
	<view class="pop-paidImg">
		<view class="pop-paidImg-sure" @tap="cancelAddBtn">关闭view>
	view>
view>

对应函数

insertImage() {
	let that = this;
	uni.chooseImage({
		count: 1,
		success: (res) => {
			this.paidImgUrl="";
			this.showLoading("图片上传中");
			//上传文件的临时路径
			console.log("that.paidDdid");
			console.log(this.paidDdid)
			const tempFilePaths = res.tempFilePaths;
			uni.uploadFile({
				url: that.api.FKJTUpload+"&ddid="+that.paidDdid,
				filePath: tempFilePaths[0],
				name: 'file',
				success: (uploadFileRes) => {
					console.log("上传图片1111");
					console.log(uploadFileRes);
					uni.hideLoading();
					const back = JSON.parse(uploadFileRes.data);
					if(back.status=="0"){
						that.paidImgUrl = that.host+back.filepath[0];
						console.log(that.paidImgUrl);
					}else{
						that.showToast(back.msg)
					}
				},
				fail:() =>{
					uni.hideLoading();
					that.showToast("图片上传失败,请联系开发!")
				}
			});
		}
	})
},

图片上传的时候再带着参数,没有使用官方的

formData:{
	"ddid":that.paidDdidl
},

而是写在了URL里面
that.api.FKJTUpload+"&ddid="+that.paidDdid

你可能感兴趣的:(前端,vue,小程序)