uni-app 使用云函数上传图片，删除图片

阳光穿透心脏的1/2处 2022-10-16 12:28 220阅读 0赞

<template>
    	<view class="content">
    		<image class="logo" :src="src"></image>
    		<view class="text-area">
    			<text class="title">{ { title}}</text>
    		</view>
    		<view>
    			<button type="default" @click="open">调用云函数</button>
    		</view>
    		<view>
    			<button type="success" @click="upload"  style="background-color: #4CD964;color: red;margin-top: 20px;">上传文件</button>
    		</view>
    		<view>
    			<button type="success" @click="deleteUpload"  style="background-color: red;color: white;margin-top: 20px;">删除文件</button>
    		</view>
    	</view>
    </template>
    
    <script>
    	export default { 
    		data() { 
    			return { 
    				title: 'Hello',
    				src:"../../static/logo.png"
    			}
    		},
    		onLoad() { 
                
    		},
    		methods: { 
              open(){ 
    			  uniCloud.callFunction({ 
    			  	name:"get_list",
    				data:{ 
    				  "name":"张三",
    				  "age":18
    				},
    				success: (res) => { 
    					console.log(res);
    				},
    				fail: (f) => { 
    					console.log(f);
    				}
    			  })
    		  },
    		  upload(){ 
    			  let  _self=this;
    			  
    			  //上传文件
    			  uni.chooseImage({ 
    			  	count:1,
    				success: (res) => { 
    					console.log(res)
    					const  fileName=res.tempFiles[0].name;
    					const  tempFilePath=res.tempFilePaths[0];
    					console.log(tempFilePath)
    					//上传图片到云端
    					uniCloud.uploadFile({ 
    						filePath:tempFilePath,
    						cloudPath: fileName,
    						success: (data) => { 
    							console.log(data);
    							  if(data.success){ 
    								  _self.src=data.fileID; 
    							  }
    						},
    						fail: (fails) => { 
    							console.log(fails);
    						}
    					})
    					
    				},
    				fail: (err) => { 
    					console.log(err);
    				}
    			  })
    		  },
    		  deleteUpload(){ 
    			  let  _self=this;
    			  //删除云端文件
    			  uniCloud.deleteFile({ 
    			  	fileList:["https://vkceyugu.cdn.bspapp.com/VKCEYUGU-21992cd6-504c-4aa6-8529-b4e79afa8697/359db6ea-7881-42b0-beca-546cddb80b60.jpg"],
    			  				success: (res) => { 
    			  					console.log(res);
    			  				},
    			  				fail: (err) => { 
    			  					console.log(err)
    			  				}
    			  })
    		  }
    		}
    	}
    </script>
    
    <style>
    	.content { 
    		display: flex;
    		flex-direction: column;
    		align-items: center;
    		justify-content: center;
    	}
    
    	.logo { 
    		height: 200rpx;
    		width: 200rpx;
    		margin-top: 200rpx;
    		margin-left: auto;
    		margin-right: auto;
    		margin-bottom: 50rpx;
    	}
    
    	.text-area { 
    		display: flex;
    		justify-content: center;
    	}
    
    	.title { 
    		font-size: 36rpx;
    		color: #8f8f94;
    	}
    </style>

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70]: /images/20221014/db4a1c442b6c429b8d706d2a0d43335f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70 1]: /images/20221014/a64124638acd40e79db6d0776a7de16f.png