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

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

一、上传图片功能

1. 方法实现

在util/index.js中，我们封装了一个chooseImage函数，用于选择并上传图片。该函数通过Uniapp的API实现了图片的选择和上传，支持从相册中选择图片。

export function chooseImage(URL, callback) {    uni.chooseImage({        count: 1,        sourceType: ["album"],        success: res => {            uni.getImageInfo({                src: res.tempFilePaths[0],                success: image => {                    uni.showLoading({ title: "图片上传中", mask: true });                    uni.uploadFile({                        url: `${VUE_APP_API_URL}${URL}`,                        file: image,                        header: {                            Authorization: "Bearer " + store.getters.token                        },                        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                    });                }            });        }    });}

2. 使用方法

在页面中引用方法并传递所需的URL参数：

import { chooseImage } from "@/utils";

3. 示例使用

在页面的tap事件中调用方法：

4. 注意事项

在不同的接口中，URL参数可以拼接或单独传递。例如：

// 单独传递chooseImage("/system/qiNiuContent", img => {    if (img != undefined || img != null) {        this.uploadPictures.push(img);        this.showPicture = this.uploadPictures[0];    }});// 拼接参数chooseImage("/system/qiNiuContent?param=1", img => {    // ...});

二、复制文本功能

1. 方法实现

在util/index.js中，我们封装了copyClipboard函数，用于将文本数据复制到剪切板。

export const copyClipboard = (data) => {    uni.setClipboardData({        data: data,        success: res => {            uni.showToast({                title: '复制成功',                icon: 'success',                duration: 2000            });        }    });};

2. 引用方法

在页面中引入并使用方法：

import { copyClipboard } from "@/utils";

3. 页面调用

在需要复制的位置添加点击事件：

       
    
    
            
     
        
     
      开户户名：
             
     
        
                 
      
            
      
                       复制            
              
         
    
   

常见问题

在H5页面中，可能会出现“不支持H5页面操作，仅可在App上进行操作”的错误提示。这是由于Uniapp的剪切板功能在H5页面中不支持直接操作。通过云打包到App中即可正常使用该功能。

总结

通过以上方法，我们可以在Uniapp项目中实现图片上传和文本复制功能。这些功能可以根据实际需求进行扩展和定制，以提升用户体验和功能便捷性。

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