如何通过 Gitee API 上传文件到指定仓库

如何通过 Gitee API 上传文件到指定仓库

首先，进入Gitee官方API文档：https://gitee.com/api/v5/swagger#/postV5ReposOwnerRepoContentsPath，找到仓库 --> 新建文件接口 -->点击申请授权

找到接口 https://gitee.com/api/v5/repos/{owner}/{repo}/contents/{path}

填写基本信息 access_token，owner，repo，path，content，message，branch 等必要参数信息。

点击左下方【测试】按钮，查看是否成功

（ 如果出现404 或者其他 就是没成功）

下方是测试成功的

代码逻辑

<template><view class="container"><button @click="chooseMedia">选择图片/视频</button><button @click="uploadToGitee" :disabled="!selectedFiles.length">上传到Gitee</button><view class="preview-container"><view v-for="(file, index) in selectedFiles" :key="index" class="preview-item"><image v-if="file.type === 'image'" :src="file.path" mode="aspectFit" class="preview-image"></image><video v-else-if="file.type === 'video'" :src="file.path" controls class="preview-video"></video><text class="file-name">{{ file.name }}</text></view></view><view v-if="uploading" class="upload-status">上传中... {{ uploadedCount }}/{{ selectedFiles.length }}</view><view v-if="uploadError" class="error-message">上传失败: {{ uploadError }}</view><view v-if="uploadSuccess" class="success-message">上传成功!</view></view>
</template><script>
export default {data() {return {selectedFiles: [],uploading: false,uploadedCount: 0,uploadError: null,uploadSuccess: false,// Gitee 配置 - 替换为你的实际信息giteeConfig: {owner: 'your-gitee-username',repo: 'your-repo-name',branch: 'master',token: 'your-gitee-access-token'}}},methods: {async chooseMedia() {try {const res = await uni.chooseMedia({count: 9,mediaType: ['image', 'video'],sourceType: ['album', 'camera'],maxDuration: 30,camera: 'back'})this.selectedFiles = res.tempFiles.map(file => ({path: file.tempFilePath,name: this.generateFileName(file.tempFilePath),type: file.fileType === 'image' ? 'image' : 'video',file: file}))this.uploadError = nullthis.uploadSuccess = false} catch (err) {uni.showToast({title: '选择文件失败',icon: 'none'})console.error(err)}},generateFileName(filePath) {const ext = filePath.split('.').pop()const timestamp = new Date().getTime()const random = Math.floor(Math.random() * 10000)return `file_${timestamp}_${random}.${ext}`},async uploadToGitee() {if (!this.selectedFiles.length) returnthis.uploading = truethis.uploadedCount = 0this.uploadError = nullthis.uploadSuccess = falsetry {for (const file of this.selectedFiles) {await this.uploadSingleFile(file)this.uploadedCount++}this.uploadSuccess = trueuni.showToast({title: '全部文件上传成功',icon: 'success'})} catch (err) {this.uploadError = err.message || '上传失败'uni.showToast({title: '上传失败',icon: 'none'})console.error(err)} finally {this.uploading = false}},async uploadSingleFile(file) {// 1. 读取文件内容const fileContent = await this.readFileAsBase64(file.path)// 2. 准备上传数据const uploadData = {access_token: this.giteeConfig.token,content: fileContent,message: `Upload ${file.name}`,branch: this.giteeConfig.branch}// 3. 调用 Gitee API 上传文件const response = await uni.request({url: `https://gitee.com/api/v5/repos/${this.giteeConfig.owner}/${this.giteeConfig.repo}/contents/${file.name}`,method: 'POST',data: uploadData,header: {'Content-Type': 'application/json;charset=UTF-8'}})if (response[1].statusCode !== 201) {throw new Error(response[1].data.message || '上传失败')}return response[1].data},readFileAsBase64(filePath) {return new Promise((resolve, reject) => {plus.io.resolveLocalFileSystemURL(filePath, entry => {entry.file(file => {const reader = new plus.io.FileReader()reader.onloadend = evt => {// 移除 data URL 前缀const base64 = evt.target.result.split(',')[1]resolve(base64)}reader.onerror = rejectreader.readAsDataURL(file)}, reject)}, reject)})}}
}
</script><style>
.container {padding: 20px;
}button {margin: 10px 0;padding: 10px;background-color: #007AFF;color: white;border-radius: 5px;
}button:disabled {background-color: #cccccc;
}.preview-container {margin-top: 20px;
}.preview-item {margin-bottom: 15px;border: 1px solid #eee;padding: 10px;border-radius: 5px;
}.preview-image {width: 100%;height: 200px;
}.preview-video {width: 100%;height: 200px;
}.file-name {display: block;margin-top: 5px;font-size: 12px;color: #666;
}.upload-status, .error-message, .success-message {margin-top: 10px;padding: 10px;border-radius: 5px;
}.upload-status {background-color: #f0f0f0;
}.error-message {background-color: #ffeeee;color: #ff0000;
}.success-message {background-color: #eeffee;color: #00aa00;
}
</style>