利用uview的u-upload实现文件上传并预览

html代码

<u-form-item label="资产图片" prop="picture" borderBottom>
     <u-upload 
           :fileList="fileList" 
           :previewFullImage="true"
           @afterRead="afterRead" 
           @delete="deletePic" 
           multiple 
           :maxCount="1" 
           width="250" 
           height="150">
     </u-upload>
</u-form-item>

data中

fileList: [],

method中

封装上传请求方法

      uploadFilePromise(url) {
            // 获取上传域名
            const domain = this.loginForm.serveIp;
            // token
            let token = getStore({ name: 'access_token' });
            // 请求头
            var header = {
                Authorization: 'Bearer ' + token
            };
            //判断是否选择了租户ID
            const TENANT_ID = getStore({ name: 'tenantId' });
            // 请求头中添加租户
            if (TENANT_ID) {
                header['TENANT-ID'] = TENANT_ID;
            }
            return new Promise((resolve, reject) => {
                uni.uploadFile({
                    // 完整上传路径 H5端需要解决跨域问题
                    url: 'http://' + domain + '/admin/sys-file/upload',
                    // 本地上传读取到的url
                    filePath: url,
                    name: 'file',
                    // 请求头
                    header: header,
                    // 附加表单对象
                    formData: {
                        user: 'test'
                    },
                    success: res => {
                        // 这里res是普通对象，但是res.data为JSON字符串，需要转一下
                        const result = JSON.parse(res.data);
                        // 获取上传成功后的文件地址
                        const formUrl = result.data.url;
                        // 赋值表单数据（后台需要）
                        this.dataForm.picture = formUrl;
                        // 把文件的二进制对象抛出去用于图片预览
                        resolve(res.data.data);
                    }
                });
            });
        },

@afterRead事件本地文件读取完成的事件

       async afterRead(event) {
            // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
            const item = event.file[0];
            this['fileList'].push({
                ...item,
                //提示上传中
                status: 'uploading',
                message: '上传中'
            });
            // 获取本地读取文件路径
            const url = item.url;
            //result为上传成功的响应数据
            let result = await this.uploadFilePromise(url);
            //上传成功提示，以及回显
            this['fileList'].splice(
                0,
                1,
                Object.assign(item, {
                    status: 'success',
                    message: '上传成功',
                    // 二进制文件流用于预览图片
                    url: result
                })
            );
        },

移除图片事件

        deletePic(e) {
            this['fileList'].splice(0, 1);
        },