首先我用vue上传阿里图片用的是分片上传，分片上传由于一片是以100kb为起始的，所以当图片大小小于100kb的时候不分片，可以正常上传，当大于100kb的时候，会报400错误如下
One or more of the specified parts could not be found or the specified entit
当报这个错误时你要去登录阿里后台设置一下
文档地址：https://help.aliyun.com/document_detail/32069.htm exopose header 要设置为 ETag
设置如下图
当你设置好了之后发现大于100kb也可以上传了，只不过阿里返回的图片链接格式有所不同
大于100kb的图片链接？后面带了一些参数你要截取
下面是我的代码，运用了element组件库，包含了图片上传阿里，图片压缩
<template><div class="fabu"><div class="d1"><div class="dd1"><textarea placeholder="想要说的..." v-model="form.comment">textarea><el-uploadaction="":http-request="zidingyi_upload" list-type="picture-card"ref="upload":limit="3":auto-upload="false":on-preview="handlePictureCardPreview":on-remove="handleRemove":on-exceed="handleExceed":before-remove="beforeRemove":file-list="fileList"><i class="el-icon-plus">i>el-upload>div><el-dialog :visible.sync="dialogVisible"><img width="100%" :src="dialogImageUrl" alt="">el-dialog><div class="dd2"><p>红包个数p><p><input type="number" v-model="form.packet_count" placeholder="填写个数"/>个p>div><div class="dd3"><p>单个金额p><p><input type="number" v-model="form.single_Amount" placeholder="填写金额"/>元p>div><el-button class="fa" @click="submitUpload">发布el-button>div>div> template><script> // var OSS = require('ali-oss') export default{name:'fabu',data(){return{dialogImageUrl: '',dialogVisible: false,fileList:[],img_url_num:[],//用户发布时的图片 user_token:'',form:{//发布时的参数 comment:'',imagea:'',imageb:'',imagec:'',lat:'',lng:'',single_Amount:'',//红包单价 packet_count:'',//红包个数 },}},mounted(){this.user_token=localStorage.getItem('user_token')this.form.lat=localStorage.getItem('lat')this.form.lng=localStorage.getItem('lng')},methods:{//自定义点击上传 submitUpload(){if(this.$refs.upload.submit()!=undefined){//如果用户点击发布时有上传图片if(this.form.comment==''){this.$alert('你还没有填写发布内容','提示',{confirmButtonText: '确定',callback:action => {}})return}this.$refs.upload.submit()}else{//如果用户点击发布时没有有上传图片if(this.form.comment==''){this.$alert('你还没有填写发布内容','提示',{confirmButtonText: '确定',callback:action => {}})return}this.userLaunchEvent2()}},//移除图片 handleRemove(file, fileList) {console.log(file, fileList);},//点击文件列表中已上传的文件时的钩子，可修改放大图片及删除 handlePictureCardPreview(file){this.dialogImageUrl = file.url;this.dialogVisible = true;},//超出限制 handleExceed(files, fileList) {this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);},//删除图片 beforeRemove(file, fileList) {return this.$confirm(`确定移除 ${ file.name }？`);},//自定义图片上传 zidingyi_upload(event){console.log(event)//先压缩在上传//利用H5的FileReader对象将上传的图片转成base64格式this.h5_reader(event.file)},//阿里图片上传 doUpload(file){let that =thisconst client = new OSS.Wrapper({secure: false,//http region: 'oss-cn-hangzhou',accessKeyId: '9eEB2RAzLHaW5Asu',accessKeySecret: 'YdbWni4mRxDy0ndN6g4xH9ErpkV5ZT',bucket: 'xiangcaoshequ'/*装图片的桶名*/})//获取图片的的格式 let type = file.type.split('/')[1];//自定义上传的名字 let name = 'xcb'+file.lastModified+'.'+type; // let name = 'lz'+this.user_phone+'.'+type;// console.log(type)if(file.size>this.fileSize){this.$alert('亲，你上传的头像太大了，不能大于1M哦', '提示', {confirmButtonText: '确定',callback: action => {}});return}client.multipartUpload(name, file,{progress:function*(percentage, cpt){// 上传进度 that.percentage = percentageconsole.log(percentage)}}).then((result)=> {console.log(result)//至此就拿到了返回的路径//得到上传后的地址 let user_img = result.res.requestUrls[0];//因为图片压缩之后大于100kb的情况下返回的图片路径有？而小于100kb没有，所以我做以下处理 let img_url=user_img.split('?')[0]//上传是的图片路径放到数组里this.img_url_num.push(img_url)//调用后台接口this.userLaunchEvent()}).catch(function (err) {console.log(err);});},// 压缩图片 compress(img) {let canvas = document.createElement("canvas");let ctx = canvas.getContext("2d");let initSize = img.src.length;let width = img.width;let height = img.height;canvas.width = width;canvas.height = height;// 铺底色 ctx.fillStyle = "#fff";ctx.fillRect(0, 0, canvas.width, canvas.height);ctx.drawImage(img, 0, 0, width, height);//0.1进行最小压缩 let ndata = canvas.toDataURL("image/jpeg", 0.5);// console.log("*******压缩后的图片大小*******");// console.log(ndata)// console.log(ndata.length);return ndata;},//利用H5的FileReader对象将上传的图片转成base64格式 h5_reader(file){var that=this//创建一个reader let reader = new FileReader();//将图片转成base64格式 reader.readAsDataURL(file);//读取成功后的回调 reader.onloadend = function() {let result = this.result;let img = new Image();img.src = result;console.log("********未压缩前的图片大小********");console.log(result.length);img.onload = function() {let data = that.compress(img);that.imgUrl = result;let blob = that.dataURItoBlob(data);console.log("*******base64转blob对象******");console.log(blob);var formData = new FormData();formData.append("file", blob);console.log("********将blob对象转成formData对象********");console.log(formData.get("file"));//压缩之后再阿里上传 let event =formData.get("file")that.doUpload(event)};};},// base64转成bolb对象 dataURItoBlob(base64Data) {var byteString;if (base64Data.split(",")[0].indexOf("base64") >= 0)byteString = atob(base64Data.split(",")[1]);else byteString = unescape(base64Data.split(",")[1]);var mimeString = base64Data.split(",")[0].split(":")[1].split(";")[0];var ia = new Uint8Array(byteString.length);for (var i = 0; i < byteString.length; i++) {ia[i] = byteString.charCodeAt(i);}return new Blob([ia], { type: mimeString });},//得到上传后的三个图片路径，调用接口//阿里图片上传之后的请求的发布内容 userLaunchEvent(){this.form.imagea=this.img_url_num[0]this.form.imageb=this.img_url_num[1]this.form.imagec=this.img_url_num[2]if(this.form.imageb==undefined){this.form.imageb=''}if(this.form.imagec==undefined){this.form.imagec=''}console.log(this.form)this.$http.post('https://www.52herb.com/yuandi/campaign/userLaunchEvent?token='+this.user_token,this.form).then((res)=>{console.log(res)})},//如果用户没有上传图片只是发了内容 userLaunchEvent2(){console.log(this.form)this.$http.post('https://www.52herb.com/yuandi/campaign/userLaunchEvent?token='+this.user_token,this.form).then((res)=>{console.log(res)})},//微信支付 zhifu_money(){let url = window.location.href.split('#')[0];url = encodeURIComponent(url)this.$http.get('https://www.52herb.com/yuandi/app/weixinSign?url='+url).then((res)=>{wx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appId: 'wx0e8a3c02faa5d089',timestamp: res.body.data.timestamp,nonceStr:res.body.data.nonceStr,signature: res.body.data.signature,jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表 });})let user_money = 0;let money = input_value*100;//产品价格 let pay_type = 'reachW'//微信支付this.$http.get("https://www.52herb.com/yuandi/pay/reach/weixin/preorderh5?money="+money+"&user_money="+user_money+"&pay_type="+pay_type+"&openId="+this.openid+"&shop_guid="+this.shop_guid+"&token="+this.user_token+"¬ify_url=http://www.xiangcaobang.com/webapp/saoma.html&status=1").then((res)=>{ // alert(JSON.stringify(res))var orderId =res.body.orderId;wx.chooseWXPay({timestamp: res.body.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符 nonceStr: res.body.nonceStr, // 支付签名随机串，不长于 32 位 package: res.body.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*） signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5' paySign: res.body.paySign, // 支付签名 success: function (res) {// 支付成功后的回调函数 that.$http.post("https://www.52herb.com/yuandi/pay/weixin/updateUserOrder?orderId="+orderId+"&token="+that.user_token+"&method=2").then((res)=>{ // alert(JSON.stringify(res))if(res.body.code==0){that.$confirm('支付成功', '提示', {confirmButtonText: '继续支付',cancelButtonText: '返回首页',type: 'warning'}).then(() => {//获取用户当天余额抵扣多少钱 that.huoqucishu()}).catch(() => { that.$router.push({name:'Index'})});}})}})})}}} script><style scoped="scoped">/*.fa{font-size: 0.3rem;width: 50%;height: 0.8rem;line-height: 0.8rem;background: green;margin: auto;text-align: center;}*/.up .el-upload{width: 0.5rem;height: 0.5rem;}.fabu{background: #f0f0f0;position: absolute;width: 100%;height: 100%;}.d1 .dd1{height: 4rem;background: white;padding: 0.2rem 0.2rem 0 0.2rem;}.d1 textarea{height: 2rem;width: 100%;padding: 0.1rem;box-sizing: border-box;line-height: 0.35rem;color: orange;}.d1 .dd2,.d1 .dd3{padding: 0 0.2rem;box-sizing: border-box; background: white;height: 0.8rem;line-height: 0.8rem;display: flex;font-size: 0.3rem;margin-top: 0.2rem;justify-content: space-between;}.d1 .dd2 input,.d1 .dd3 input{width: 1.5rem;} style>
转载于:https://www.cnblogs.com/lizhao123/p/9355387.html