首先我用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-upload
action=""
: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"><!--auto-upload是否在选取文件后立即进行上传 exceed超出限制--><!--http-request点击发布--><!--:on-progress上传进度-->
<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 =this
const 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 = percentage
console.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>