uni-app 支付宝云上传文件到内置存储报错 vue3

示例代码：

selectFile() {  
    let that = this;  
    uni.chooseFile({  
        count: 1,  
        extension: this.fileTypes,  
        sourceType:['album'],  
        success: function(res) {  
            console.log(res);  
            console.log(JSON.stringify(res.tempFilePaths));  
            if (res.tempFilePaths.length > 0) {  
                let filePath = res.tempFilePaths[0];  
                let fileName = res.tempFiles[0].name;  
                let fileExtension = that.getExtension(fileName);  
                if (that.fileTypes.indexOf('.' + fileExtension) == -1) {  
                    uni.showModal({  
                        title: "上传失败",  
                        content: "请选择正确的文件格式",  
                        showCancel: false  
                    })  
                    return  
                }  
                //进行上传操作  
                uniCloud.uploadFile({  
                    filePath: filePath,  
                    cloudPath: 'img/' + fileName,  
                    onUploadProgress: function(progressEvent) {  
                        console.log(progressEvent);  
                        var percentCompleted = Math.round(  
                            (progressEvent.loaded * 100) / progressEvent.total  
                        );  
                    },  
                    success(res) {  
                        console.log("上传完成", res);  
                        that.updateValue(res.fileID)  
                    },  
                    fail(err) {  
                        console.log("上传出错", err);  
                    },  
                    complete() {  
                        console.log("完成");  
                    }  
                });  
            }  
        }  
    })  
}

操作步骤：

创建vue3项目，并启用uniCloud，选择支付宝云
编写使用uniCloud.uploadFile上传的代码
运行到浏览器进行

预期结果：

浏览器控制台错误结果：

Access to XMLHttpRequest at 'https://u.object.cloudrun.cloudbaseapp.cn/miniapp-prod-env-00jxh6arfjpy-hz/?use_dynamic=1&source_product=oss&creator=2021004166655952&acl=default&file_id=cloud://env-00jxh6arfjpy/img/2.bmp&content_type=application/x-bmp&param_sign=9a86324bd8e6ea0e67c53428a61710e3a0a80311' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

实际结果：

浏览器控制台错误结果：

Access to XMLHttpRequest at 'https://u.object.cloudrun.cloudbaseapp.cn/miniapp-prod-env-00jxh6arfjpy-hz/?use_dynamic=1&source_product=oss&creator=2021004166655952&acl=default&file_id=cloud://env-00jxh6arfjpy/img/2.bmp&content_type=application/x-bmp&param_sign=9a86324bd8e6ea0e67c53428a61710e3a0a80311' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

bug描述：

vue2正常，vue3报错错误信息：has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

songsunli 1楼•3 天前作者

配置一下跨域，把 localhost:5173 添加进去。

sinazl 2楼•3 天前

在处理uni-app中通过支付宝云上传文件到内置存储时遇到报错，通常可能是由于权限配置、API使用不当或文件处理错误等原因引起的。以下是一个基于Vue 3的uni-app示例代码，用于通过支付宝云上传文件到内置存储，并附带一些基本的错误处理逻辑。

首先，确保在支付宝小程序的manifest.json中已配置了云开发权限：

{
  "mp-alipay": {
    "appid": "your-alipay-appid",
    "setting": {
      "urlCheck": false,
      "requestDomain": [],
      "wsRequestDomain": [],
      "uploadDomain": [],
      "downloadDomain": [],
      "debug": false,
      "cloudfunctionRoot": "cloudfunctions/",
      "es6": true,
      "cloud": true // 确保启用了云功能
    }
  }
}

然后，在你的Vue 3组件中，可以这样实现文件上传：

<template>
  <view>
    <button @click="chooseFile">选择文件</button>
  </view>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const file = ref(null);

    const chooseFile = async () => {
      try {
        const res = await uni.chooseFile({
          count: 1,
          type: 'file',
          extension: ['*'],
        });
        file.value = res.tempFiles[0];

        if (file.value) {
          await uploadFileToCloud(file.value);
        }
      } catch (error) {
        console.error('选择文件失败:', error);
      }
    };

    const uploadFileToCloud = async (file) => {
      try {
        const cloudPath = `/${Date.now()}_${file.name}`;
        const res = await uni.cloud.uploadFile({
          cloudPath: cloudPath,
          filePath: file.path,
          success: (uploadRes) => {
            console.log('文件上传成功:', uploadRes);
            // 这里可以处理文件上传成功后的逻辑，如保存文件ID到数据库等
          },
          fail: (err) => {
            console.error('文件上传失败:', err);
          },
        });
      } catch (error) {
        console.error('上传文件到云失败:', error);
      }
    };

    return {
      chooseFile,
    };
  },
};
</script>

在这个示例中，我们首先通过uni.chooseFile选择文件，然后使用uni.cloud.uploadFile将文件上传到支付宝云。注意，这里的cloudPath是文件在云存储中的路径，你可以根据需要自定义。

如果报错持续存在，请检查以下几点：

确保支付宝小程序后台已正确配置云开发权限。
检查文件路径和名称是否正确。
查看控制台输出的错误信息，根据错误信息进一步调试。

希望这个示例能帮你解决问题！如果错误依旧，请提供更详细的错误信息以便进一步分析。