uniapp--上传图片

uniapp–上传图片

由于uniapp自带的上传图片组件，删除图片和预览原来的图片存在bug，所以本人就在原来的组件的基础上进行了改进

实现思路

• 父组件将已经存在的图片路径传递给子组件
  • 子组件接收到之后，imageList子组件中一个存储图片路径的数组
  • this.imageList.push(val); this.uploadImguRL += val+','; 在这两句代码的外面是一个forEach循环
  • uploadImguRL 上传到服务器的图片路径

代码

	<view>
		<!-- 公司认证 -->
		<!-- filePath 上传图片至服务器，服务器返回的上传的图片的路径 -->
		<!-- oldFilePath 已经上传过的图片的路径   filecount上传的图片的数量-->
		<uploadImg @filePath="filePath" :oldFilePath="oldFilePath" :filecount="componyCount"></uploadImg>
		<view class="submit-btn">
			<button type="primary" @tap="confirm">确定</button>
		</view>
	</view>
</template>
<script>
	// 上传图片的组件
	import uploadImg from '../upload-file/upload.vue'
	import api from '../../../common/api.js'
	import commonData from '../../../common/common-data.js'
	export default {
		data(){
			return {
				// 存储已经存在的图片的路径
				// oldFilePath是显示之前用户信息的
				oldFilePath:[],
				// 存储上传之后服务器返回的路径
				uploadImgUrl:'',
				componyCount:{compony:10}
			}
		},
		components:{
			uploadImg
		},
		methods:{
			confirm(){
				// 点击确定，调用上传图片的接口
				// console.log(this.uploadImgUrl);
				// 防止用户直接点击确定
				let that = this;
				// 选择图片之后，服务器返回的图片路径比较慢
				if(that.uploadImgUrl == ''){
					uni.request({
						url: api.updateAddress,
						method: 'GET',
						header:{
							"token":commonData.getUserinfoThree().userinfo.token
						},
						data: {
							other_image:that.uploadImgUrl,
						},
						success: res => {
							uni.showToast({
								title: res.data.msg
							});
						},
						fail: () => {
							uni.showToast({
								title: '上传失败'
							});
						}
					});
				} else {
					uni.request({
						url: api.updateAddress,
						method: 'GET',
						header:{
							"token