vue前端上传图片,vue怎么去做上传图片功能
这篇文章主要为大家详细介绍了某视频剪辑软件实现上传图片添加水印，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件上传图片添加水印的具体实现代码，供大家参考，具体内容如下
1、封装添加水印方法
/**
* 添加水印
* @param {blob}文件
* @param {string} el
* @returns {Promise}
*/
导出异步函数addWaterMarker(file，el=#markImg) {
返回新承诺（异步（解决，拒绝)={
尝试{
//先压缩和旋转图片
文件=等待压缩器（文件)
//将文件一滴转换成图片
让img=await blobToImg(文件)
//创建帆布画布
让画布=文档。createelement(“画布”)
画布宽度=img.naturalWidth宽度
画布。身高=img。自然高度
let ctx=canvas.getContext(2d )
//填充上传的图片
ctx.drawImage(img，0，0，canvas.width，canvas.height)
//生成水印图片
const markEle=document。查询选择器
const markWidth=markele。客户宽度
常量刻度=画布。宽度* 0.25/标记宽度
//先缩放水印再转成图片
马克尔。风格。transform= scale($ { scale })
const markImg=await htmlToCanvas(markEle)
//填充水印
ctx.drawImage(markImg，canvas。width-markImg.width-15 *比例，画布。height-markImg.height-15 *刻度，markImg。宽度，标记。高度)
//将帆布转换成一滴
画布。to blob(blob=resolve(blob))
} catch(错误){
拒绝（错误)
}
})
}
函数blobToImg(blob) {
返回新承诺((解决，拒绝)={
let reader=new FileReader()
reader.addEventListener(load ，()={
让img=新图像()
img.src=reader。结果
img.addEventListener(load ，()=resolve(img))
})
reader.readAsDataURL(blob)
})
}
导出函数htmlToCanvas(el，backgroundColor=rgba(0，0，0，1)) {
返回新承诺（异步（解决，拒绝)={
尝试{
const markImg=await html 2 can vas(El，{
比例：2,//此处不使用默认值window.devicePixelRatio，需跟移动端保持一致
allowTaint: false，//允许污染
没错，
backgroundColor //透明//背景色
})
解决（标记)
} catch(错误){
拒绝（错误)
}
})
}
/**
* 压缩和旋转图片
* @param {blob}文件
* @param {number}质量压缩比例
* @param {number} maxWidth
* @returns {Promise}
*/
导出函数压缩器（文件，质量=0.6,最大宽度=750) {
返回新承诺(resolve={
新压缩程序（文件，{
最大宽度，
质量，
成功：决心，
错误(呃){
console.log(错误消息)
}
})
})
}
2、项目中使用
！-图片上传-
div class= flex mt20 v-if= item。问题类型===4
厢式装载机
v-model=item.imgUpload
multiple=true
惰性负载
:deletable=！禁用
:disabled=isDisabled
@delete=handleDeleteImg({.参数，item })
:before-read= handleBeforeImgUpload
:after-read= handleAfterImgUpload
@点击。native=当前项目=项目
/
/div
脚本
导入{
getTaskDetail，
用户执行，
提交流程，
拒绝流，
}来自”@/API/我的任务”；
从" @/实用工具/oss "导入{上传OSS }；
从" @/实用工具"导入{ parseTime，addWaterMarker }；
从"万特"导入{图像预览}；
从"压缩机"导入压缩程序；
const fileExtensions=[xlsx ， xls ， docx ， doc ， pdf ]；
常数质量=0.2;//图片压缩质量
导出默认值{
方法：{
//上传前
异步handleBeforeImgUpload(img，detail) {
如果(!img) {
返回
}
返回新承诺（异步（解决，拒绝)={
if (Array.isArray(img)) {
如果(图像长度5) {
这个$吐司(’一次最多上传5张，请分批次上传!)
拒绝()
}
让blobs=[]
对于(img的常量文件){
//大于512k的图片则先压缩
如果(文件。大小为512 * 1024的文件。类型。包括( image/){
文件=等等这个。压缩器(文件)
}
//添加水印
let blob=await addWaterMarker(文件)
blob.name=file.name
推(斑点)
}
解决（斑点)
}否则{
//大于512k的图片则先压缩
如果(img。尺寸512 * 1024 img。类型。包括( image/){
img=等等这个。压缩机(img)
}
const blob=await addWaterMarker(img)
blob.name=img.name
解析(斑点)
}
})
},
//上传后
异步handleAfterImgUpload(img，detail) {
尝试{
$loading.show()
if (Array.isArray(img)) {
img.forEach(async ({ file }，index)={
如果(!file.name ！文件。类型。包括( image/){
这个。当前项目。imgupload。拼接(细节。索引索引，1)
这个$吐司(’上传失败，只能上传照片!)
//上传完成
if (index===img.length - 1) {
$loading.hide()
}
return //forEach里的返回相当于继续
}
if (file.size 1024 * 1024 * 10) {
这个。当前项目。imgupload。拼接(细节。索引索引，1)
这个$吐司(’文件太大，单个文件不能超过10米！")
//上传完成
if (index===img.length - 1) {
$loading.hide()
}
返回
}
尝试{
const { fileName，url }=await uploadOSS(file)
this.currentItem.answer.push({
url，
})
} catch(错误){
这个。当前项目。imgupload。拼接(细节。索引索引，1)
这个$吐司(’上传失败，请稍后重试!)
控制台.错误(错误)
}
//上传完成
if (index===img.length - 1) {
$loading.hide()
}
})
}否则{
如果(!img。文件。类型。包括(图像){
这个。当前项目。imgupload。拼接(细节。指数，1)
$loading.hide()
这个$吐司(’上传失败，只能上传照片!)
返回
}
如果(img。文件。size=1024 * 1024 * 10){
这个。当前项目。imgupload。拼接(细节。指数，1)
$loading.hide()
这个$吐司(’文件太大，不能超过10米！")
返回
}
//大于512k则先压缩
let file=img.file
const { fileName，url }=await uploadOSS(file)
this.currentItem.answer.push({
url，
})
$loading.hide()
}
} catch(错误){
这个。当前项目。imgupload。拼接(细节。指数，1)
$loading.hide()
这个$吐司(’上传失败，请稍后重试!)
控制台.错误(错误)
}
}
}
感谢龙哥的指导；
3、效果如下
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。