文件上传(WebUploader)成功之前自定义裁剪(vue-img-cutter)，上传裁剪的图片，并兼容ie

上传文件使用的是WebUploader，可分片、并发、文件体积大时支持MD5秒传
地址：http://fex.baidu.com/webuploader/
思路：初始化上传组件，使用vue-img-cutter的裁剪；在裁剪成功之后；为兼容ie, 将裁剪获得的base64Url格式的图片地址转成bolo文件，追加到上传队列之中；调用上传方法继续进行上传，以确保上传的是裁剪后的图片
使用方法：
第一步：先引用webuploader.js，建议下载下来放在本地直接使用
安装依赖vue-img-cutter并引用
第二步：初始化webUploader
代码如下

<template><div class="logoF1 fl"><div><ImgCutter @cutDown="cutDown" label="上传LOGO":cutWidth="180":cutHeight="40":moveAble="true":sizeChange="false"WatermarkText=""></ImgCutter></div><div class="upload-wrap" v-show="false"><div id="uploader" class="wu-example"><div class="btns"><div id="picker" class="up-btn">上传LOGO</div></div></div></div></div></div>
</template>
import ImgCutter from 'vue-img-cutter'
import webuploader from '@/utils/webuploader.js'
export default {components: {ImgCutter},data () {return {ruleForm: {logoUrl: '',logoId: ''},uploader: null, // 文件cropperFiles: [], // 裁剪之后的文件}},mounted () {this.init()},methods () {cutDown (res) {this.logoFileName = res.fileName// 裁剪之后base64Url 转成流文件let blob = this.dataURLtoBlob(res.dataURL)this.fileList = res.dataURL// 将流追加进队列this.uploader.addFiles(blob)},init () {// 初始化webuploaderthis.uploader = webuploader.create({// 选择文件的按钮pick: '#picker',// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！compress: false,// 是否开启大文件分片上传，默认为truechunked: true,// 分片上传线程数，默认为3，如果使用断点续传建议线程数改为1threads: 1,// 如果某个分片由于网络问题出错，允许自动重传多少次，默认为2chunkRetry: 2,// 每一片的大小，默认为10MchunkSize: 1024 * 1024 * 10,// 上传超时时间，默认为2分钟timeout: 15 * 60 * 1000,// 是否允许同一个文件重复上传，默认为falseduplicate: true,// 非官方参数，文件大小超过该值则进行分片，默认为10MthresholdSize: 1024 * 1024 * 10,// 非官方参数，是否支持切换至阿里云，有特殊需求的项目可以开通此项，需要进行授权，默认为falseuploadToThirdPartyStorage: false,// 非官方参数，是否开启秒传，默认为true，强烈建议开启。秒传关闭情况，阿里云分片上传默认无MD5checkMd5: true})let _this = this// 上传文件之前this.uploader.on('beforeFileQueued', function (file) {let type = ['bmp', 'gif', 'png', 'jpg', 'jpeg']let size = 10485760_this.file = file// 校验校验类型if (type && type.indexOf(file.ext.toLowerCase()) === -1) {_this.$message.info({message: '文件格式错误，请重新选择上传！',offset: 100})return false}// 检验文件大小if (file.size === 0) {_this.$message.info({message: `不得上传空文件`,offset: 100})return false}if (file.size > size) {_this.$message.info({message: `文件不得大于10M`,offset: 100})return false}_this.fileName = file.namereturn true})// 当上传的文件加入队列以后触发this.uploader.onFileQueued = function (file) {_this.cropperFiles = []file.name = _this.logoFileName// upload()开始上传。此方法可以从初始状态调用开始上传流程，也可以从暂停状态调用，继续上传流程_this.uploader.upload()}// 上传成功this.uploader.on('uploadSuccess', function (file) {// 将上传的文件放在裁剪文件列表中_this.cropperFiles = [{fileId: file.id,fileType: file.ext,fileSize: file.size,fileName: _this.logoFileName,percentage: 100, // 进度完成fileUrl: file.url,id: file.contextId}]_this.filesLogo = _this.cropperFiles_this.ruleForm.logoUrl = _this.filesLogo[0].fileUrl_this.ruleForm.logoId = _this.filesLogo[0].id_this.showCropee = false})// 上传过程中进度显示this.uploader.on('uploadProgress', function (file, percentage) {_this.cropperFiles = [{percentage: percentage}]})},}
}

如有其他文件裁剪并上传的方法，希望大家告知，以供学习；先说谢谢了

文件上传(WebUploader)成功之前自定义裁剪(vue-img-cutter)，上传裁剪的图片，并兼容ie相关推荐

MVC文件上传07-使用客户端jQuery-File-Upload插件和服务端Backload组件裁剪上传图片...
本篇通过在配置文件中设置,对上传图片修剪后保存到指定文件夹. 相关兄弟篇: MVC文件上传01-使用jquery异步上传并客户端验证类型和大小 MVC文件上传02-使用HttpPostedFileB ...
antd vue表单上传文件_AntDesign vue学习笔记-自定义文件上传
上传文件时实际可能需要传输一个token. 方法一: 1.查看vue antdesign文档 https://vue.ant.design/components/upload-cn/ 2.使用cust ...
从服务器收到意料之外的响应,WordPress出现“从服务器收到预料之外的响应。此文件可能已被成功上传。请检查媒体库或刷新本页。”错误的解决方法...
在WordPress网站上遇到图片上传问题?对于大多数初学者来说,图片上传错误可能会让人很困惑,因为无需您做任何其他操作就可以显示它们. 无法上传图片是WordPress中最常见的图片问题之一.幸运的 ...
Ubuntu/Window下X2Go安装连接同步/上传文件夹（一次性成功）
Ubuntu/Window下X2Go安装&连接&同步/上传文件夹(一次性成功) 一 Window下载安装X2Go Client 二在ubuntu上安装X2Go 三 Window用X2 ...
java检查文件上传完成,java – AmazonS3,如何检查上传是否成功？
我用 Java编写了一个简短的测试代码来上传在内存中生成的PDF文件.在这个测试代码中我只使用一个虚拟字节数组,但在实际使用中,我将在该字节数组中放置一个生成的PDF(最多2-3页).一切正常:文件上 ...
【Vegas原创】wordpress 从服务器收到预料之外的响应。此文件可能已被成功上传。请检查媒体库或刷新本页。此响应不是合法的JSON响应。解决方法。...
两种报错方式: 1.此响应不是合法的JSON响应. 2.从服务器收到预料之外的响应.此文件可能已被成功上传.请检查媒体库或刷新本页. 情况:媒体服务器上传小文件没问题,大一点的文件报这个错误. 原因: ...
vue 移动端头像裁剪_移动端上传头像并裁剪功能(h5)
移动端头像图片上传裁剪 .button { outline: 0; display: inline-block; margin-bottom: 0; font-weight: 400; text-al ...
vue 移动端头像裁剪_vue头像上传裁剪组件_一个漂亮的Vue组件，用于图像裁剪和上传...
vue头像上传裁剪组件 vue-image-crop-upload (vue-image-crop-upload) A beautiful vue component for image crop a ...
【上传文件】基于阿里云的视频点播VOD、对象存储OSS实现音视频图片等文件上传
一.效果演示 a.测试界面初始化 b.点击[上传视频] c.点击[开始上传] d.点击[上传音频]选择音频之后点击[开始上传] c.点击[上传图片],注意图片上传为单按钮,选择文件之后自动完成上传 d ...
python文件拷贝并校验_初级版python登录验证，上传下载文件加MD5文件校验
importosimportjsonimportsocketimportstructimporthashlib#import time deflogin(): usr= input('请输入用户名:' ...

文件上传(WebUploader)成功之前自定义裁剪(vue-img-cutter)，上传裁剪的图片，并兼容ie

文件上传(WebUploader)成功之前自定义裁剪(vue-img-cutter)，上传裁剪的图片，并兼容ie相关推荐

最新文章

热门文章