一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。

在日常开发中为了方便大家使用都会封装一些公用组件以供项目开发使用，集中处理减少代码的冗余。

1.找到项目中的components 创建一个文件

在components中新建一个uploadfile.vue文件用于封装上传相关处理，这个文件名可以随意取，但是为了更加具有可读性建议文件名
与封装功能相关。
例
<view class="upload">
        <view v-if="type=='image'" class="upload-image" @click="clickimage">
                <image src="../static/img/7work_icon_18.png"></image>
                <span>上传图片</span>
        </view>
        <view v-if="type=='video'" class="upload-image" @click="clickvideo">
                <image src="../static/img/7work_icon_18.png"></image>
                <span>上传视频</span>
        </view>
</view>

type为传入的上传类型(image(图片类型),video(视频类型))

2.运用props对组件传参进行接收

props: {
        type: {
            type: String,
            default: false
        }
}

3.methods对上传方法进行封装

图片上传

clickimage() {
    let that = this;
    uni.chooseImage({      //从本地相册选择图片或使用相机拍照
        fileType: 'image',
        sourceType: ['album'],    //album 相册选图，camera 使用相机  不填默认是两种都包含
        success: (chooseImageRes) => {
            uni.showLoading({
                title: '上传中'
            })
            const tempFilePaths = chooseImageRes.tempFilePaths;   //拿到选择图片或拍照图片的本地路径
            new Promise((resolve, reject) => {
                uni.uploadFile({
                    url: "xxxxxxxxxxxxxx", //这个地方填写需要上传到的服务器地址即可
                    filePath: tempFilePaths[0],  //这个地方我用的一次单张，需要多张循环Promise或者将filePath改为files
>https://uniapp.dcloud.net.cn/api/request/network-file.html              
                    name: 'file',
                    success: (uploadFileRes) => { //这里返回的数据是字符串，所以用Json.parse将字符串转为对象
                        let data = JSON.parse(uploadFileRes.data)
                        resolve(data)   
                    },
                    fail: (error) => {  //上传失败
                        reject(error)
                    }
                })
            }).then(res => {   //运用Promise的then()方法对上传成功数据处理
                    uni.hideLoading()
                    that.$emit('watchChild', res);   
            }).catch(() => {   //上传失败关闭正在上传的状态
                uni.hideLoading()
        })
    }
    });
}

视频上传

clickvoide() {
    let that = this;
    uni.chooseVideo({
        success: function(res) {
            uni.showLoading({
                title: '上传中'
            })
            new Promise((resolve, reject) => {
                uni.uploadFile({
                    url: "xxxxxxxxxxxxxxx", //上传到的服务器地址
                    filePath: res.tempFilePath,   //视频本地地址路径
                    name: 'file',
                    success: (res) => {
                        let data = JSON.parse(res.data)  //将上传成功返回数据转为对象
                        resolve(data)
                    },
                    fail: (error) => {
                        reject(error)
                    }
                })
            }).then(res => {
                uni.hideLoading()
                that.$emit('watchChildvoide', res);    //向父组件传递一个方法并将上传成功的数据传递给父组件
            }).catch(() => {
                uni.hideLoading()
            })
        }
    })
    }
}

$emit 子组件像父组件传参 （第一个参数为父组件中接收方法的方法名，第二个为需要传递的参数）

that.$emit('watchChild', res)

组件的使用

import Upload from "@/components/uploadfile.vue" //以此为例 将组件路径根据自己项目情况修改即可

注意：使用中必须在项目中components进行组件声明注册才能使用

这样components: { Upload },

页面vue中使用

//图片上传
<Upload type="image" @watchChild="watchChild"></Upload>  //这个地方的方法@watchChild为组件中图片上传成功传递发方法，根据自己传回方法填写，@watchChild="" 双引号中为方法名视情况定义使用，视频上传同理
//视频上传
<Upload type="video" @watchChildvoide="watchChildvidoe"></Upload>

页面js中使用

watchChild(val) {}     //val为传递的数据

总结

新人第一次写文章写得不好请大家多多指教，谢谢