uniapp 上传

图片上传组件

使用组件实现图片上传功能，以下是相关的代码：

组件声明

fileList1: [],
// uviewui ui组件
<u-upload
    uploadText="上传打款凭证"
    :fileList="fileList1"
    @afterRead="afterRead"
    @delete="deletePic"
    name="1"
    :multiple="false"
    :maxCount="1"
></u-upload>

新增图片方法

afterRead(event) {
    this.imgUrl = '';
    let uploadTask = uni.uploadFile({
        url: this.$imgURL + '/api/upload/imgFile', // 仅为示例，非真实的接口地址
        filePath: event.file.url,
        name: 'file',
        formData: {
            'token': Q.getToken()
        },
        success: (uploadFileRes) => {
            this.imgUrl = JSON.parse(uploadFileRes.data).data;
        }
    });

上传过程处理

    // 上传中
    let lists = [].concat(event.file);
    let fileListLen = this[\`fileList${event.name}\`].length;
    lists.map((item) => {
        this[\`fileList${event.name}\`].push({
            ...item,
            status: 'uploading',
            message: '上传中'
        });
    });
    // 上传完成
    uploadTask.onProgressUpdate((res) => {
        if (res.progress === 100) {
            setTimeout(() => {
                let item = this[\`fileList${event.name}\`][fileListLen];
                this[\`fileList${event.name}\`].splice(fileListLen, 1, Object.assign(item, {
                    status: 'success',
                    message: '',
                    url: event.file.url
                }));
            }, 1000);
        }
        // 测试条件，取消上传任务。
        /*  if (res.progress > 50) {
            uploadTask.abort();
        }*/
    });
},