uni-app 集成图片上传前修改临时图片

发布于 1周前 作者 itying888 来自 Uni-App

uni-app 集成图片上传前修改临时图片

开发环境 版本号 项目创建方式

目前通过开发图片上传，遇到一个问题就是通过拍照或者相册选择图片，上传前生成了一个临时图片，但是不能修改，只能通过canvas去编辑然后上传，不是很便利，希望大佬们能集成一个修改上传前临时图片的demo

Harmonyos Next教程
8 回复

请问，你是单图上传还是多图上传


谢谢，目前为了修改图片，为图片添加水印，暂时写成了单图，要是有多图更好

回复 s***@gmail.com: 水印不是可以后端做。。

回复 得推软件工作室: 后端不是麻烦么，既然前端选择完图片后，有一个临时图片，修改临时图片再上传，岂不是更好，还可以随时预览

回复 s***@gmail.com: 怎么上传临时图片， 我每次上传后台都获取不到

回复 2***@qq.com:boot 后台要用MultipartFile接 public ResponseDto<UpLoadDto> upLoadPhoto(@RequestParam(“file”) MultipartFile file,HttpServletRequest request) throws Exception

回复 s***@gmail.com: 好的

在uni-app中集成图片上传前修改临时图片的功能，你可以利用uni.chooseImage来选择图片，然后通过Canvas对图片进行预处理，最后上传处理后的图片。下面是一个简单的代码案例，展示了如何实现这一功能。

首先，确保你的项目中已经配置了必要的权限，例如访问相册和保存文件的权限。

步骤1：选择图片

使用uni.chooseImage来选择图片，并获取临时文件路径。

uni.chooseImage({
    count: 1, // 选择图片的数量
    success: (res) => {
        const tempFilePaths = res.tempFilePaths;
        if (tempFilePaths.length > 0) {
            const tempFilePath = tempFilePaths[0];
            modifyAndUploadImage(tempFilePath);
        }
    },
    fail: (err) => {
        console.error('选择图片失败', err);
    }
});

步骤2：使用Canvas修改图片

定义一个函数modifyAndUploadImage，该函数将使用Canvas对图片进行修改。

function modifyAndUploadImage(tempFilePath) {
    const ctx = uni.createCanvasContext('myCanvas'); // 创建一个Canvas上下文

    uni.getImageInfo({
        src: tempFilePath,
        success: (imageInfo) => {
            const { width, height } = imageInfo;
            // 在这里可以进行图片修改，例如缩放、裁剪等
            // 以下示例将图片缩放到宽度为300px，高度按比例缩放
            const newWidth = 300;
            const newHeight = (height * newWidth) / width;

            ctx.drawImage(tempFilePath, 0, 0, newWidth, newHeight);
            ctx.draw(false, () => {
                uni.canvasToTempFilePath({
                    canvasId: 'myCanvas',
                    destWidth: newWidth,
                    destHeight: newHeight,
                    success: (res) => {
                        const modifiedTempFilePath = res.tempFilePath;
                        uploadImage(modifiedTempFilePath);
                    },
                    fail: (err) => {
                        console.error('Canvas导出图片失败', err);
                    }
                });
            });
        },
        fail: (err) => {
            console.error('获取图片信息失败', err);
        }
    });
}

步骤3：上传修改后的图片

定义一个函数uploadImage来上传修改后的图片。

function uploadImage(modifiedTempFilePath) {
    uni.uploadFile({
        url: 'https://your-server-upload-url', // 替换为你的服务器上传接口
        filePath: modifiedTempFilePath,
        name: 'file',
        success: (uploadFileRes) => {
            console.log('上传成功', uploadFileRes);
        },
        fail: (err) => {
            console.error('上传失败', err);
        }
    });
}

注意事项

  • 确保你的页面中有一个Canvas组件，其canvas-id为myCanvas。
  • 上传接口的URL需要替换为你自己的服务器地址。
  • 根据实际需求，你可以在Canvas绘制图片时进行更多的图像处理操作。

这个代码案例展示了如何在uni-app中选择图片、通过Canvas修改图片并上传修改后的图片。

回到顶部