uni-app组件每次都要调用upload.js进行上传

uni-app组件每次都要调用upload.js进行上传

假如手机号已经是老用户，再次授权登录不需要再次上传头像， 需要让父组件传递头像地址和昵称到cui-userprofiledialog中去，就不需要每次上传头像和选择昵称， 能否升级一下，往props传递昵称和头像啊

1 回复

更多关于uni-app组件每次都要调用upload.js进行上传的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在处理 uni-app 组件中的文件上传时，如果每次都需要调用 upload.js 进行上传操作，我们可以通过封装一个通用的上传函数来简化这个过程。以下是一个简单的示例，展示如何在 uni-app 中实现这一功能。

首先，假设我们有一个 upload.js 文件，它包含一个通用的上传函数：

// upload.js
export function uploadFile(filePath, url, formData = {}) {
    return new Promise((resolve, reject) => {
        uni.uploadFile({
            url: url,
            filePath: filePath,
            name: 'file',
            formData: formData,
            success: (uploadFileRes) => {
                resolve(uploadFileRes.data);
            },
            fail: (err) => {
                reject(err);
            }
        });
    });
}

接下来，在组件中我们可以使用这个封装的上传函数。例如，在一个页面组件中：

<template>
    <view>
        <button @click="chooseImage">选择图片</button>
    </view>
</template>

<script>
import { uploadFile } from '@/common/upload.js'; // 假设 upload.js 放在 common 文件夹下

export default {
    data() {
        return {
            tempFilePath: ''
        };
    },
    methods: {
        chooseImage() {
            uni.chooseImage({
                count: 1,
                success: (res) => {
                    this.tempFilePath = res.tempFilePaths[0];
                    this.uploadImage();
                }
            });
        },
        async uploadImage() {
            try {
                const uploadUrl = 'https://your-server.com/upload'; // 替换为你的上传接口
                const formData = { userId: '12345' }; // 示例表单数据
                const response = await uploadFile(this.tempFilePath, uploadUrl, formData);
                console.log('上传成功:', response);
                // 处理上传成功后的逻辑
            } catch (error) {
                console.error('上传失败:', error);
                // 处理上传失败后的逻辑
            }
        }
    }
};
</script>

在这个示例中，当用户点击按钮时，会触发 chooseImage 方法，让用户选择一张图片。选择完成后，调用 uploadImage 方法，该方法使用 uploadFile 函数将图片上传到服务器。uploadFile 函数返回一个 Promise，因此我们可以使用 async/await 语法来处理异步操作。

通过这种方式，你可以将上传逻辑封装在一个单独的模块中，并在需要上传文件的地方直接调用这个封装好的函数，从而避免在每个组件中重复编写上传逻辑。这种方法提高了代码的可维护性和复用性。

回到顶部