uniapp + uview实现图片上传minio全过程实现，并对图片做了加水印

最新推荐文章于 2024-07-09 10:24:41 发布
最新推荐文章于 2024-07-09 10:24:41 发布
阅读量2.8k 收藏 7
点赞数 2
分类专栏： uniapp 文章标签： 前端 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ypf_1996/article/details/123105983
版权
该博客详细介绍了在前端页面使用uView UI库的u-upload组件进行图片上传，结合uni-app实现图片预览、添加水印及限制上传数量。在后端，使用MinIO作为文件存储服务，实现了文件上传接口，包括创建bucket、上传文件、获取文件外链等功能。此外，还展示了如何配置MinIO的相关参数和YAML配置。
摘要由CSDN通过智能技术生成

在前端页面中，采用了uview的上传组件u-upload。详情参数请参考uview官网：https://www.uviewui.com/components/upload.html

template中的主要页面代码

		<!--图片上传-->
		<u-upload
			:capture="['camera']"
			@afterRead="afterRead"
			:maxCount="1"
			:previewFullImage="true"
			></u-upload>
		<image v-show="entity.zpurl!=null" style="width: 100%;height: 300px;" :src="entity.zpurl"></image>			
		
		<!-- 画布 -->
		<view style='width:0px;height:0px;overflow:hidden;'>
			<canvas canvas-id="cid" :style="{height:`${cvHeight}px`,width:`${cvWidth}px`}"></canvas>
		</view>

data中定义的属性

		data() {
			return {
				entity:{
					zpurl:null,	
				},
				cvHeight:'',
				cvWidth:'',
			}
		},

methods中的方法

			// 保存上传图片
			async afterRead(event) {
				const _this = this;
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				for (let i = 0; i < lists.length; i++) {
					// 不加水印打开下面两行代码，注释下面代码
					//const tpurl = await this.uploadFilePromise(lists[i].url);
					//this.entity.zpurl = tpurl;
					// 加水印使用下面代码
					const tpurl = lists[i].url;
					const sytext = '拍摄时间 : ' + _this.getNowFormatTime();  // 水印内容
					uni.getImageInfo({
						src: tpurl,
						complete: function (image) {
							// 动态设置canvas宽高
							_this.cvHeight = image.height;
							_this.cvWidth = image.width;
							setTimeout(()=>{
								_this.imgToCanvas(tpurl, image.width, image.height,sytext);
							},200)
							
						}
					});
				}
			},
			// 给图片添加水印
			// url:图片url;width:图片宽度;height:图片高度,text:水印文字
			imgToCanvas(url, width, height, text) {
				const ctx = uni.createCanvasContext('cid');
				ctx.drawImage(url, 0, 0,width,height);
				// 设置水印的位置
				ctx.font="24px Georgia";
				ctx.fillStyle = "red";
				ctx.fillText(text, 50, 30);
				//绘制到canvas上
				ctx.draw()
				const timer = setTimeout(() => {
					uni.canvasToTempFilePath({
						canvasId: 'cid',
						fileType: 'jpg',
						success: (res) => {
							this.setFilePath(res.tempFilePath); // 将添加的水印保存minio		
					 	}
					}, this)
					clearTimeout(timer)
				}, 500)
			},
			async setFilePath(path){
				const tpurl = await this.uploadFilePromise(path);  // 上传方法
				this.entity.zpurl = tpurl;  // 将上传成功的图片地址返回
			},
			// 上传图片
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					uni.showLoading({
						title: '正在上传图片'
					})
					let a = uni.uploadFile({
						url: this.$supervisoryApi + '/file/fileupload', // 上传接口地址，例如:http://127.0.0.1:8080/file/fileupload
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {	
							uni.$u.toast('上传成功');
							resolve(JSON.parse(res.data).url);	
						},
						complete: () => {
							uni.hideLoading();
						}
					});
				})
			},
			//获取当前日期，格式YYYY-MM-DD
			getNowFormatDay(nowDate) {
			    var char = "-";
			    if(nowDate == null){
			        nowDate = new Date();
			    }
			    var day = nowDate.getDate();
			    var month = nowDate.getMonth() + 1;//注意月份需要+1
			    var year = nowDate.getFullYear();
			    //补全0，并拼接
			    return year + char + this.completeDate(month) + char + this.completeDate(day);
			}, 
			//获取当前时间，格式YYYY-MM-DD HH:mm:ss
			getNowFormatTime() {
			    var nowDate = new Date();
			    var colon = ":";
			    var h = nowDate.getHours();
			    var m = nowDate.getMinutes();
			    var s = nowDate.getSeconds();
			    //补全0，并拼接
			    return this.getNowFormatDay(nowDate) + " " + this.completeDate(h) + colon + this.completeDate(m) + colon + this.completeDate(s);
			},     
			//补全0
			completeDate(value) {
			    return value < 10 ? "0"+value:value;
			},

后端接口：/file/fileupload文件上传代码如下

	//Controller代码：
	@PostMapping("/file/fileupload")
    public FileEntity fileupload(@RequestParam("file") MultipartFile file) {
        FileEntity fileEntity = fileService.fileupload(file);
        return fileEntity;
    }
    //Servie代码：
    FileEntity fileupload(MultipartFile files);
    //Service实现类代码：
    private String BUCKET_NAME = "aaaaa"; // 自行修改
    private String ORIGINAL_NAME = "bb";  // 自行修改
    @Override
    public FileEntity fileupload(MultipartFile file) {
        FileEntity fileEntity = null;
   		try {
        	fileEntity = minioUtil.uploadFile(file,BUCKET_NAME,ORIGINAL_NAME); 
        } catch (Exception e) {
        	e.printStackTrace();
        }    
        return fileEntity;
    }

MinioUtil工具类代码(项目工程相关的pakage路径我用xxx代替了，请自行替换)

package xxx.util;
import xxx.MinioPropertiesConfig;
import xxx.entity.FileEntity;
import io.minio.*;
import io.minio.messages.Bucket;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.web.multipart.MultipartFile;

import java.io.InputStream;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.List;
import java.util.Optional;
import java.util.UUID;

@Slf4j
@Component
public class MinioUtil {

    @Autowired
    private MinioPropertiesConfig minioProp;

    @Autowired
    private MinioClient client;

    /**
     * 创建bucket
     */
    public void createBucket(String bucketName) throws Exception{
        if (!client.bucketExists(BucketExistsArgs.builder().bucket(bucketName).build())) {
            client.makeBucket(MakeBucketArgs.builder().bucket(bucketName).build());
        }
    }

    /**
     * 上传文件
     */
    public FileEntity uploadFile(MultipartFile file, String bucketName, String OriginalName){
        //判断存储桶是否存在  不存在则创建
        try {
            createBucket(bucketName);
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        }
        //文件名
        String originalFilename = file.getOriginalFilename();
        //新的文件名 = 存储桶文件名_时间戳.后缀名
        assert originalFilename != null && !"".equals(originalFilename);
        String extName = originalFilename.substring(originalFilename.lastIndexOf("."));

        String format = new SimpleDateFormat("yyyy/MM/dd/").format(new Date());
        String fileuuid = UUID.randomUUID().toString().replaceAll("-", "");
        String objectName = OriginalName+"/"+format + fileuuid + extName;
        //开始上传
        try {
            client.putObject(
                    PutObjectArgs.builder().bucket(bucketName).object(objectName).stream(
                            file.getInputStream(), file.getSize(), -1)
                            .contentType(file.getContentType())
                            .build());
        } catch (Exception e) {
            e.printStackTrace();
           return null;
        }
        String url = minioProp.getEndpoint() + "/" + bucketName + "/" + objectName;
        String urlHost = minioProp.getFilHost() + "/" + bucketName + "/" + objectName;
        log.info("上传文件成功url ：[{}], urlHost ：[{}]", url, urlHost);
        FileEntity fileEntity = new FileEntity();

        fileEntity.setName(originalFilename);
        extName = extName.replace(".","");
        fileEntity.setType(extName);
        fileEntity.setUrl(url);
        return fileEntity;
    }

    /**
     * 获取全部bucket
     *
     * @return
     */
    public List<Bucket> getAllBuckets() throws Exception {
        return client.listBuckets();
    }

    /**
     * 根据bucketName获取信息
     *
     * @param bucketName bucket名称
     */
    public Optional<Bucket> getBucket(String bucketName) throws Exception {
        return client.listBuckets().stream().filter(b -> b.name().equals(bucketName)).findFirst();
    }

    /**
     * 根据bucketName删除信息
     *
     * @param bucketName bucket名称
     */
    public void removeBucket(String bucketName) throws Exception {
        client.removeBucket(RemoveBucketArgs.builder().bucket(bucketName).build());
    }

    /**
     * 获取文件外链
     *
     * @param bucketName bucket名称
     * @param objectName 文件名称
     * @param expires    过期时间 <=7
     * @return url
     */
    public String getObjectURL(String bucketName, String objectName, Integer expires) throws Exception {
        return client.getPresignedObjectUrl(GetPresignedObjectUrlArgs.builder().bucket(bucketName).object(objectName).expiry(expires).build());
    }

    /**
     * 获取文件
     *
     * @param bucketName bucket名称
     * @param objectName 文件名称
     * @return ⼆进制流
     */
    public InputStream getObject(String bucketName, String objectName) throws Exception {
        return client.getObject(GetObjectArgs.builder().bucket(bucketName).object(objectName).build());
    }

    /**
     * 上传文件
     *
     * @param bucketName bucket名称
     * @param objectName 文件名称
     * @param stream     文件流
     * @throws Exception https://docs.minio.io/cn/java-client-api-reference.html#putObject
     */
    public void putObject(String bucketName, String objectName, InputStream stream) throws
            Exception {
        client.putObject(PutObjectArgs.builder().bucket(bucketName).object(objectName).stream(stream, stream.available(), -1).contentType(objectName.substring(objectName.lastIndexOf("."))).build());
    }

    /**
     * 上传文件
     *
     * @param bucketName  bucket名称
     * @param objectName  文件名称
     * @param stream      文件流
     * @param size        大小
     * @param contextType 类型
     * @throws Exception https://docs.minio.io/cn/java-client-api-reference.html#putObject
     */
    public FileEntity putObject(String bucketName,String OriginalName, String objectName, InputStream stream, long
            size, String contextType) throws Exception {
        String extName = objectName.substring(objectName.lastIndexOf("."));
        String format = new SimpleDateFormat("yyyy/MM/dd/").format(new Date());
        String fileuuid = UUID.randomUUID().toString().replaceAll("-", "");
        objectName = OriginalName+"/"+format + fileuuid + objectName;
        client.putObject(PutObjectArgs.builder().bucket(bucketName).object(objectName).stream(stream, size, -1).contentType(contextType).build());
        String url = minioProp.getEndpoint() + "/" + bucketName + "/" + objectName;
        FileEntity fileEntity = new FileEntity();
        fileEntity.setName(objectName);
        fileEntity.setType(extName);
        fileEntity.setUrl(url);
        return fileEntity;
    }

    /**
     * 删除文件
     *
     * @param bucketName bucket名称
     * @param objectName ⽂件名称
     * @throws Exception https://docs.minio.io/cn/java-client-apireference.html#removeObject
     */
    public void removeObject(String bucketName, String objectName) throws Exception {
        client.removeObject(RemoveObjectArgs.builder().bucket(bucketName).object(objectName).build());
    }

}

MinioPropertiesConfig配置

package xxx.configuration;

import io.minio.MinioClient;
import lombok.Data;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.context.annotation.Bean;
import org.springframework.stereotype.Component;

@Data
@Component
@ConfigurationProperties(prefix = "minio")  // 这个在项目yml文件中定义属性
public class MinioPropertiesConfig {

    /**
     * 端点
     */
    private String endpoint;
    /**
     * 用户名
     */
    private String accessKey;
    /**
     * 密码
     */
    private String secretKey;

    /**
     * 桶名称
     */
    private String bucketName;

    /**
     * 域名
     */
    private String filHost;




    @Bean
    public MinioClient minioClient() {
        MinioClient minioClient = MinioClient.builder()
                .endpoint(endpoint)
                .credentials(accessKey,secretKey)
                .build();
        return minioClient;
    }

}

yml配置minio参数

#minio配置
minio:
  endpoint: http://xxxx:9000  #对象存储服务的URL,xxxx换为服务器地址，本机为127.0.0.1或局域网ipv4地址
  accessKey: minioadmin #Access key账户
  secretKey: minioadmin  #Secret key密码
ypf_1996
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
MiniPhoto图片批量处理工具加水印
08-09
迷你图片批量处理工具，她能够帮您迅速大批量处理您的图片。您只需要将一张或多张图片甚至一个文件夹拖放到添加窗口，即可完成图片的添加，方便好用。 功能概述：批量更改大小、批量图片压缩、批量添加水印、批量更改格式、批量增加特效等。 修订概述： 新增水印图片旋转功能。 新增图片旋转、灰色、反色、模糊、锐化、棕色、红色、绿色、蓝色、青色、品红、黄色等特效处理。 新增图片色相、饱和度、亮度、对比度、阀值等调整功能。 新增以文件名、拍摄时间、当前时间为水印文字的设置。 新增水印文字与水印图片的同时支持。 新增图片裁剪的自定义裁剪位置。 新增添加水印时对小尺寸图片的过滤功能。 新增设置保存功能。 新增水印图片输入框拖拽功能，您可以直接将水印图片拖拽至水印图片文本框。 修正了多文件夹拖拽到添加图片窗体后出现的程序崩溃问题。 修订了图片修改后EXIF信息丢失的问题。 新增图片列表Delete快捷键移除图片功能。 提示：如果您不能正常使用该软件，请安装.NET Framework 2.0， 下载地址：http://www.microsoft.com/downloads/details.aspx?familyid=0856EACB-4362-4B0D-8EDD-AAB15C5E04F5&displaylang=zh-cn 迷你软件系列工具： 迷你图片批量处理工具 迷你文件校验工具 迷你定时提醒工具 迷你词典(MiniDict) Excel数据导出工具 迷你网站检测工具 迷你批量更改文件编码工具 ... 、
uniapp +上传文件+安卓、ios文件选择
12-22
支持所有类型文件选择，支持安卓、ios文件选择、返回base64 （pdf,word,txt等）；直接导入HBuiler运行到手机可以查看效果
uniapp根据minio签名地址实现文件直传
METEORS7的博客
05-29 1051
uniapp前端minio签名直传
uniapp+uview实现手机端上传照片带水印（保姆级全过程）
最新发布
逆水行舟 不进则退
07-09 926
使用uniapp+uview实现上传照片+水印功能，保姆级教程！！！
uniapp小程序上传图片到minio
zhenzhenzhen1705的博客
05-24 833
【代码】uniapp小程序上传图片到minio。
UniApp文件上传（SpringBoot+Minio）
也许是偶然R
05-04 2981
UniApp文件上传(SpringBoot+Minio) 一、Uni文件上传 (1)、文件上传的问题 UniApp文件上传文档 uni.uploadFile({ url: 'https://www.example.com/upload', //仅为示例，非真实的接口地址 files: 图片地址对象数组, formData: { 'user': 'test' }, suc...
微信小程序 uview 使用Upload 组件时添加水印
yu_run的博客
06-07 1541
微信小程序 uview 使用Upload 组件时添加水印
uni-app+uview组件上传图片时添加水印并保存到相册，具体样式需自己调整
Z1014h的博客
12-21 446
【代码】uni-app+uview组件上传图片时添加水印并保存到相册，具体样式需自己调整。
uniapp+uView 实现自定义水印相机，拍完照片给图片加水印，从相册选择图片加水印功能
Z1014h的博客
01-15 2285
uniapp+uView 实现自定义水印相机，拍完照片给图片加水印，从相册选择图片加水印功能
【uni-app】压缩图片并添加水印
y_coder的博客
08-24 1224
这是一个用于检测上传的图片文件格式的函数。它接受一个文件名列表作为参数，并返回一个 Promise 对象。它接受一个图片的URL作为参数，并返回一个Promise对象。这个函数的作用是加载指定URL的图片，获取其宽度和高度，并将它们包装在一个对象中返回。函数的目的是检查上传的文件是否属于支持的图片格式（.jpg、.jpeg、.png）。它接受一个图片的URL、图片的宽度和高度作为参数，并返回一个Promise对象。这是一个用于在图片上添加水印并将结果绘制到 canvas 上的异步函数。
uniapp使用
lemonmr的博客
06-27 272
小程序没有跨域问题存在，但是H5有 所以如果发布了H5，出现跨域问题。那么应该在整个环境的配置时要注意： 比方说，我们接口为： /api/mobile/login /api/mobile/logout 如果我们已经将接口发布到服务器上了，如果说服务器ip为10.4.13.1，端口为8080 小程序访问的时候，应每次都要带上ip和端口。 但是H5，如果带上ip和端口，那么就会出现跨域问题出现。 如何解决这个问题？ 应该把小程序和H5的环境区分开来: url='/api/mobile/login' //#if
uniapp 使用uView框架 upload组件上传前压缩图片
Jadon_z的个人博客
03-29 4669
根据Uview官方文档所说，若是小程序和app项目，上传使用压缩图片，可以配置u-upload组件的sizeType属性为'compress'，但这对H5是无效的。在实际开发中，图片压缩上传经常是一个必要的需求，所以本篇文章主要讲的是在H5项目中如何使用Uview的upload组件进行压缩图片。
对象存储Minio 客户端工具类，实现文件上传、图像压缩、图像添加水印
lihuajian1024的博客
09-12 1万+
在搭建好了MInio分布式对象存储集群后，官方提供了MInio Client 各类语言的SDK，但是无法直接使用需要进一步封装，这里将JAVA 版的的SDK结合自身业务做个简单封装。 Minio 中文文档入口：https://docs.min.io/cn/minio-quickstart-guide.html Minio Clinet SDK文档入口：https://docs.min.io/c...
文件上传至minio（前台传file）
weixin_42176881的博客
12-26 5963
将base64转成file传入后台 //将base64转换为文件 dataURLtoFile: function(dataurl, filename) { var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, ...
【uniapp小程序】uploadFile文件上传
热门推荐
C站全栈优质创作者、阿里云受邀博主专家，喜欢结识新伙伴寻找志同道合的朋友，欢迎一起探讨学习
08-21 2万+
上节中我们讲到小程序的request请求，掌握了基本的网络请求方式，这节我们通过小程序的uploadFile接口能力完成对小程序上传操作（uni.uploadFile，后端php接口），通过这一节你可以学习到php的上传接口的写法，以及如何配合前端完成一个小程序上传操作✨✨欢迎订阅本专栏或者关注我，大家一起努力每天一题算法题✨✨❤️❤️❤️ 最后，希望我的这篇文章能对你的有所帮助！愿自己还有你在未来的日子，保持学习，保持进步，保持热爱，奔赴山海！❤️❤️❤️。
给minio/S3服务增加图片处理服务imgproxy，图片压缩、裁剪、水印，Java实现举例
tuine's blog
01-27 2977
minio图片处理服务，s3图片处理服务，图片裁剪、图片压缩、增加水印，使用Imgproxy实现，Java简单实现举例
uniapp+uview upload实现上传，action为#时，自己处理
前端小白成长记
09-09 5874
upload文件 <template> <view> <view class="multiImgContainer"> <view v-for="(item, index) in lists" :key="index"> <view class="showImageContainer" v-if="item.filePath || item.url"> <u-image width="85px" height
miniprogram-ci 实现uniapp微信小程序代码预览和上传
weixin_42650105的博客
08-03 1191
实现微信小程序一键发布！
uni-app 实现照片水印并上传照片
qq_43619832的博客
09-23 4577
话不多说，直接代码 <template> <view class="wrap"> <u-form :model="model" ref="uForm" > <u-form-item :label-position="labelPosition" label="照片信息:" prop="photo" label-width="160"> <u-upload width="160" :deletable="false" // 是
nestjs引入minio
10-22
NestJS是一个基于Node.js的开发框架，它提供了许多有用的功能和工具，其中包括对Minio的支持。Minio是一个开源的对象存储服务器，它兼容Amazon S3 API，可以用于存储和检索大量数据。在NestJS中引入Minio可以通过安装minio-js库来实现。在NestJS中使用Minio需要创建一个MinioService类，该类需要使用minio-js库中的Minio.Client类来连接到Minio服务器。在MinioService类中，可以使用putObject方法将文件上传到Minio服务器。在上传文件之前，需要对已有的文件进行判断是否有相同文件名(或者使用时间戳)，如果有重名的文件会对其进行覆盖操作。下面是一个示例代码，用于在NestJS中引入Minio： // minio.service.ts import { Injectable } from "@nestjs/common"; import * as Minio from "minio"; @Injectable() export class MinioService { private readonly minioClient: Minio.Client; constructor() { this.minioClient = new Minio.Client({ // 服务ip endPoint: "192.168.18.24", // 服务端口 port: 9000, useSSL: false, accessKey: "minioadmin", secretKey: "minioadmin", }); } async uploadFile(bucketName: string, objectName: string, stream: Buffer) { const res = await this.minioClient.bucketExists(bucketName); console.log(res); console.log(objectName, stream); await this.minioClient.putObject( bucketName, objectName, stream, function (e) { if (e) { console.log(e); return "error"; } else { // 如果重名也会成功 return "Successfully uploaded the buffer"; } }, ); } } --相关问题--: 1. Minio和Amazon S3有什么区别？ 2. NestJS还支持哪些对象存储服务器？ 3.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值