unicloud非常良心 个人开发者可以每个云空间免费10g存储 不限速。

可以做一个非常好用的网盘用。（也可以上传个人图片，但是千万不要滥用资源）。

代码实现

1.新建项目，新建云空间，绑定云空间（此处跳过，详细请点击）

2、代码实现

//核心方法
//file转化为 base64
makeBlob(file) {
	let reader = new FileReader();
	reader.readAsDataURL(file)
	console.log(reader)
	reader.onload = () => {
		//reader.result是base64文件

	}}

//上传base64文件
upBase64(base64){
uniCloud.uploadFile({
			filePath: base64,
			cloudPath: '自定义名字，可以从file.name中获取',
			success: (res) => {
				// console.log('成功', res)
				

			},
			fail: (err) => {
				// console.log('失败', err)
				uni.showToast({
					title: "上传失败，请重试！",
					icon: 'error'
				})
			},
			complete() {}
		});
}

3.总代码实现 实现可以拖动文件上传

<template>
	<view class="content">
		<div ref='select_frame' @click="xztp" class="up_div" ondragstart="return false">
		</div>

	</view>
</template>

<script>
	import card from '../../components/card.vue'
	export default {
		data() {
			return {
				adminData : '',
				filename: '',
				fileData: [],
				fileValue: '',
				fileUrl : ''
			}
		},
		components: {
			card
		},
		
		mounted() {
			this.$refs.select_frame.ondragleave = (e) => {
				e.preventDefault() // 阻止离开时的浏览器默认行为
			}
			this.$refs.select_frame.ondrop = (e) => {
				e.preventDefault() // 阻止拖放后的浏览器默认行为
				const data = e.dataTransfer.files[0] // 获取文件对象
				if (data.length < 1) {
					return // 检测是否有文件拖拽到页面
				}
				console.log(data)
				// this.upload(data)//上传文件的方法

				// 上传
				this.upDataFile(data)

			}
			this.$refs.select_frame.ondragenter = (e) => {
				e.preventDefault() // 阻止拖入时的浏览器默认行为
				this.$refs.select_frame.border = '2px dashed red'
			}
			this.$refs.select_frame.ondragover = (e) => {
				e.preventDefault() // 阻止拖来拖去的浏览器默认行为
			}
		},
		methods: {
			upDataFile(data) {
				// console.log('上传函数', data)
				this.filename = data.name
				this.makeBlob(data)
				// s
			},
			
			// file转换base上传
makeBlob(file) {
	let reader = new FileReader();
	reader.readAsDataURL(file)
	console.log(reader)
	reader.onload = () => {
		uniCloud.uploadFile({
			filePath: reader.result,
			cloudPath: this.filename,
			success: (res) => {
				// console.log('成功', res)
				

				console.log(res.fileID)
				
			},
			fail: (err) => {
				// console.log('失败', err)
				uni.showToast({
					title: "上传失败，请重试！",
					icon: 'error'
				})
			},
			complete() {}
		});
	}
}
		}
	}
</script>

<style>
	.up_div {
		width: 60%;
		height: 300px;
		border-radius: 8px;
		border: 3px solid #b1b0af;
		margin: 50px auto 100px auto;
	}

	.up_div.hover {
		background-color: #007AFF;
		border: 3px solid #6ab2ff;
	}

	.file_all {
		width: 70%;
		margin: 0 auto 0 auto;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
	}
</style>