vue-cropper图片裁剪结合 OSS 实现图片直传（后台）

html 代码

<divv-loading="repairLoading"element-loading-text="in the save"element-loading-spinner="el-icon-loading"element-loading-background="rgba(0, 0, 0, 0.8)"><div class="cropper-content"><div class="cropper"><vueCropperref="cropper":img="option.img":output-size="option.size":output-type="option.outputType":info="true":full="option.full":can-move="option.canMove":can-move-box="option.canMoveBox":original="option.original":auto-crop="option.autoCrop":auto-crop-width="option.autoCropWidth":auto-crop-height="option.autoCropHeight":fixed-box="option.fixedBox":center-box="option.centerBox"@realTime="realTime"@imgLoad="imgLoad"/></div><divclass="show-preview":style="{'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden', 'margin': '5px'}"><div :style="previews.div" class="preview"><img :src="previews.url" :style="previews.img"></div></div><div v-show="isShowRepair()" class="repair-tags"><span>repair</span></div></div></div>

JS代码：

uploadOss() {// var file = {}var _self = this_self.repairLoading = true_self.newSrc = ''this.$refs.cropper.getCropBlob(data => {_self.$http.get(process.env.VUE_APP_PRO_API + 'file_server/oss/getToken/').then(res => {_self.aliyunOssToken = res.datavar reader = new FileReader()reader.onload = function(e) {// target.result 该属性表示目标对象的DataURL// console.log(e.target.result);}// reader.rederAsDataURL(data);const files = new window.File([data], filename, { type: data.type })// console.log(files);var filename = ''var aa = _self.repairList[_self.reNum].src.lastIndexOf('/')filename = _self.repairList[_self.reNum].src.substring(aa + 1, _self.repairList[_self.reNum].src.length)// console.log(aa,_self.repairList[_self.reNum].src.length);var formData = new FormData()// 注意formData里append添加的键的大小写formData.append('key', _self.aliyunOssToken.dir + filename) // 存储在oss的文件路径formData.append('OSSAccessKeyId', _self.aliyunOssToken.accessid) // accessKeyIdformData.append('policy', _self.aliyunOssToken.policy) // policyformData.append('Signature', _self.aliyunOssToken.signature) // 签名// 如果是base64文件，那么直接把base64字符串转成blob对象进行上传就可以了formData.append('file', files)formData.append('success_action_status', 200) // 成功后返回的操作码var url = _self.aliyunOssToken.hostvar fileUrl =_self.aliyunOssToken.host +'/' +_self.aliyunOssToken.dir +filename_self.$http.post(url, formData, {headers: { 'Content-Type': 'application/form-data' }}).then(response => {// console.log(response);// console.log(fileUrl);var obj = {}obj.section__search_category_id = _self.searchForm.categoryobj.list__spus = _self.mark_spuobj.source_image = _self.repairList[_self.reNum].srcobj.target_image = fileUrlrepairImgSave(obj).then(result => {if (result.code === 0) {_self.repairLoading = false_self.$message({message: 'repair successfully',type: 'success'})if (_self.repairList[_self.reNum].reTags.indexOf('repair') === -1) {_self.successNum += 1}_self.repairList[_self.reNum].reTags.push('repair')// _self.repairList[_self.reNum].reTags.splice(_self.repairList[_self.reNum].reTags.indexOf('logo'),1);_self.repairList[_self.reNum].src = fileUrlif (_self.reNum < _self.repairList.length - 1) {_self.reNum += 1}// _self.successNum += 1;if (_self.repairList.filter(item => item.reTags.indexOf('repair') === -1).length === 0) {_self.imgDialog = false// _self.$options.methods.getMarkData.bind(this)();_self.repairList[_self.reNum].src = fileUrl}//} else {_self.$message.error(result.message)_self.repairLoading = false}}).catch(res => {_self.repairLoading = false})})// console.log(fileUrl);}).catch(res => {_self.repairLoading = false})})},

直接贴的代码，其中有些应该和你们的业务不符合。由于本人有点懒几个月前写的也懒得删减了望大家见谅

vue-cropper图片裁剪结合 OSS 实现图片直传（后台）相关推荐

php 图片裁剪保存,PHP实现图片裁剪、添加水印效果代码
这篇文章主要介绍了PHP实现图片裁剪.添加水印效果代码,本文给出代码示例,代码中包含一些说明注释,需要的朋友可以参考下 3.PHP对图像的裁剪裁剪之前 header("content-ty ...
react-native多图选择、图片裁剪(支持ad/ios图片个数控制)
前言: 目前关于rn比较知名并且封装好的图片选择控件很多,不过能同时支持多图片上传,个数控制兼容iOS/Ad的却寥寥无几,而今天介绍的这款框架可以实现:图片裁剪.最大图片个数限制.拍照.本地相册等功能 ...
android 裁剪图片工具,图片裁剪助手app下载-图片裁剪助手软件下载 v4.0安卓版_5577安卓网...
图片裁剪助手是款非常实用的图片编辑软件,这款软件能够根据图片的情况进行自由裁剪,类似PS的软件,能够让用户自由进行图片剪辑和抠图,还能自由压缩图片,自由设置图片的大小,非常实用的一款软件,快来下载吧! ...
python图片裁剪软件_python 实现图片裁剪小工具
实现:tkinter 画布上显示图片,按下鼠标左键并且移动,实现截图 # -*- encoding=utf-8 -*- import os import tkinter as tk from PIL ...
native react 图片多选_react-native多图选择、图片裁剪(支持ad/ios图片个数控制)
import ImagePicker from 'react-native-syan-image-picker' /** * 默认参数*/const options={ imageCount:6, / ...
将目标检测大尺寸图片裁剪成固定尺寸图片
裁剪固定尺寸图片主要是将大图裁剪成固定尺寸,并转化VOC中的xml格式,要点如下: 尺寸不够四舍五入成一张图.(可分为4部分,左上部分固定尺寸,最后一列,最后一行,以及剩余右下角部分) 若目标在边缘 ...
native react 图片裁剪,使用react-native-image-picker将图片上传到firebase
I've been trying to upload an image using firebase, React Native and react-native-image-picker. The ...
android 图片裁剪库,（译）uCrop介绍 —— 我们自己的Android图片裁剪库
我们在 Yalantis 开发了许多不同的 Android 应用,经验告诉我们,几乎在所有的应用中,都需要图片裁剪的功能.图片裁剪的用途很广,从简单的用户头像调整到图片的比例裁剪.灵活变换等各种复杂的 ...
android 自定义图片裁剪,uCrop介绍，我们自己的安卓版图片裁剪库
在Yalantis,我们开发了许多不同的安卓app,根据我们的经验来看,几乎每个我们开发的应用都需要图片裁剪的功能.图片裁剪可以用于很多目的,从普通到头像调整到按比例裁剪以及图片变换等更复杂的功能. ...

vue-cropper图片裁剪结合 OSS 实现图片直传（后台）

vue-cropper图片裁剪结合 OSS 实现图片直传（后台）相关推荐

最新文章

热门文章

vue-cropper图片裁剪 结合 OSS 实现图片直传（后台）

vue-cropper图片裁剪 结合 OSS 实现图片直传（后台）相关推荐

最新文章

热门文章

vue-cropper图片裁剪结合 OSS 实现图片直传（后台）

vue-cropper图片裁剪结合 OSS 实现图片直传（后台）相关推荐