vue阿里上傳圖片報400錯誤

首先我用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+"&notify_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>