博客
关于我
uniapp实现上传图片及其复制文本功能
阅读量:244 次
发布时间:2019-03-01

本文共 3268 字,大约阅读时间需要 10 分钟。

uniapp实现上传图片及其复制文本功能

一,上传图片

1,util/index.js中封装方法

export function chooseImage(URL,callback) {    uni.chooseImage({        count: 1,        sourceType: ["album"],        success: res => {            uni.getImageInfo({                src: res.tempFilePaths[0],                success: image => {                    console.log(image);                    uni.showLoading({ title: "图片上传中", mask: true });                    uni.uploadFile({                        // url: `${VUE_APP_API_URL}/api/upload`,                        url: `${VUE_APP_API_URL}`+URL,                        file: image,                        filePath: image.path,                        header: {                            Authorization: "Bearer " + store.getters.token                        },                        name: "file",                        success: res => {                            if (callback) {                                callback(JSON.parse(res.data).link)                                                                var uploadPic=JSON.parse(res.data).data[0]                                    console.log(uploadPic);                                callback(uploadPic)                            }                        },                        fail: err => {                            uni.showToast({                                title: "上传图片失败",                                icon: "none",                                duration: 2000                            });                        },                        complete: res => {                            uni.hideLoading()                        }                    });                },                fail: err => {                    uni.showToast({                        title: "获取图片信息失败",                        icon: "none",                        duration: 2000                    });                }            });        }    });}

注意:

如果只有一种请求图片的方法,可以直接拼接,如果使用多个的话,可以拼接一个参数,在页面方法中可直接传参使用。

// url: `${VUE_APP_API_URL}/api/upload`,       url: `${VUE_APP_API_URL}`+URL,

2,使用上传图片功能

在这里插入图片描述

a.引用方法:传参【多个不同的接口】

import {copyClipboard,chooseImage} from "@/utils";

b.页面

c,方法传参:

chooseImage(e) {      chooseImage("/system/qiNiuContent",img => {           if(img!=undefined||img!=null){        this.uploadPictures.push(img);        this.showPicture=this.uploadPictures[0];        }      });    }

d.展示图片:

e.上传多张图片时的删除图片:

@click="uploadPictures.splice(uploadPicturesIndex, 1)

二,复制文本功能

1,Utils/index下:封装方法

// 复制到剪切板export const copyClipboard = (data) => {    console.log(data)    uni.setClipboardData({        data: data,        success: (res) => {            uni.showToast({                title: '复制成功',                icon: 'success',                duration: 2000            })        }    })}

2,引入,写入方法

import {copyClipboard,chooseImage} from "@/utils";methods中引入:copyClipboard,

3,页面调用:

开户户名:
{ { bankinfo.accountName }}
复制

4,出现报错是:不支持H5页面操作,仅可在App上进行操作。

在这里插入图片描述

原因:uniapp剪切板不支持H5,云打包app后就可以看到复制功能了。

这样,上传图片和复制功能就完美解决!

转载地址:http://khbv.baihongyu.com/

你可能感兴趣的文章
MYSQL 幻读(Phantom Problem)不可重复读
查看>>
mysql 往字段后面加字符串
查看>>
mysql 快照读 幻读_innodb当前读 与 快照读 and rr级别是否真正避免了幻读
查看>>
MySQL 快速创建千万级测试数据
查看>>
mysql 快速自增假数据, 新增假数据,mysql自增假数据
查看>>
MySql 手动执行主从备份
查看>>
Mysql 批量修改四种方式效率对比(一)
查看>>
Mysql 报错 Field 'id' doesn't have a default value
查看>>
MySQL 报错:Duplicate entry 'xxx' for key 'UNIQ_XXXX'
查看>>
Mysql 拼接多个字段作为查询条件查询方法
查看>>
mysql 排序id_mysql如何按特定id排序
查看>>
Mysql 提示:Communication link failure
查看>>
mysql 插入是否成功_PDO mysql:如何知道插入是否成功
查看>>
Mysql 数据库InnoDB存储引擎中主要组件的刷新清理条件:脏页、RedoLog重做日志、Insert Buffer或ChangeBuffer、Undo Log
查看>>
mysql 数据库中 count(*),count(1),count(列名)区别和效率问题
查看>>
mysql 数据库备份及ibdata1的瘦身
查看>>
MySQL 数据库备份种类以及常用备份工具汇总
查看>>
mysql 数据库存储引擎怎么选择?快来看看性能测试吧
查看>>
MySQL 数据库操作指南:学习如何使用 Python 进行增删改查操作
查看>>
MySQL 数据库的高可用性分析
查看>>