vue安卓端微信上传图片问题

龟心似贱1 2018-04-26 11:16:26

vue编写的前端,需要一个图片上传功能,在ios,桌面端浏览器和微信都可以上传,但是在安卓端的微信上就不能上传,后端也没有接收到请求,ios和桌面端都弹出提示"image is loaded",而安卓端微信没有弹出,具体请看图片(安卓端浏览器也可以正常上传).
ios,桌面端选择图片之后:

安卓端微信选择图片之后:

安卓微信的权限都允许了.

下面是前端代码:
html页面



<div class="imgUploader">

              <div class="file-list" style="overflow: hidden;" >

                <section id="imgsrc" v-for="(file, index) in imgStore" :key="index" class="file-item draggable-item" style="position: relative; float: left;margin:10px 10px 0 0;">

                  <img id="imgsrc1" v-model="dataAddress.ImgSrc" :src="file.src" alt="" style="width: 70px;height: 70px;" ondragstart="return false;">

                  <span class="file-remove" @click="remove(index)" style="position: absolute;top: 0;right: 0; line-height:15px;text-align: center; width: 15px;height: 15px;display:inline-block; border-radius: 50%;background: red;color: #fff">X</span>

                  <span class="flie-loading" v-if="imgStatus==='uploading'">上传中...</span>

                  <span class="flie-finished" v-if="imgStatus==='finished'">已上传</span>

                </section>

                <section class="file-item" v-if="imgStatus !== 'finished' && imgStore.length < 10" style="margin-top: 15px; width: 70px; float: left;">

                  <div class="add">



                    <span><i class="fa fa-camera"></i></span>

                    <!--accept="image/jpeg,image/png" capture="camera"-->

                    <div style="color: #999;font-size: 20px;margin: 20px 0 20px;">

                      <span class="iconfont"style="border: 1px solid #999;padding: 20px;border-radius: 10px;position: relative;">

                        <input type="file"  accept="image/*" @change="selectImgs1" ref="file1" style="height: 100%; opacity: 0; position: absolute;left: 0;top: 0;">

                      </span>

                    </div>

                  </div>

                </section>

              </div>

       

            </div>

js部分:



selectImgs1 () {

        var _this4 = this;

        let fileList = this.$refs.file1.files;

        for (let i = 0, len = fileList.length; i < len; i++) {

          let item = {

            key: this.index++,

            name: fileList[i].name,

            type: fileList[i].type,

            size: fileList[i].size,

            file: fileList[i]

          }



          // 将图片文件转成BASE64格式

          let reader = new FileReader()

//          reader.onload = (e) => {

//            this.$set(item, 'src', e.target.result)

//          }

          reader.readAsDataURL(fileList[i])

          this.files.push(item)



          var vm = this;

          lrz(fileList[0], {width: 500})



            .then(function (rst) {

              // 把处理的好的图片给用户看



              let img = new window.Image()

              img.src = rst.base64;



              img.onload = function () {

                vm.$set(item, 'src', img.src);

                alert("image is loaded");

              };

              return rst;

            })

            .then(function (rst) {



              var xhr = new XMLHttpRequest();

              xhr.open('POST', process.env.CONTEXT+"/app/claim_img/upload_file", true)



//              this.imgStore.forEach((item, index) => {

//                item.name = 'imgFiles[' + index + ']'

//              rst.formData.append(item.name, item.file)

//              })

              rst.formData.append('file_data', rst.origin);

              rst.formData.append("claimNo",_this4.dataAddress.ClaimNo);

//              rst.formData.append("imgUrlFastid","20180122001")

//              rst.formData.append("imgType","6")

              console.log(rst.origin)

              xhr.send(rst.formData);



              xhr.onload = () => {

              if (xhr.status === 200 || xhr.status === 304) {

              let datas = JSON.parse(xhr.responseText)

              console.log('response: ', datas)

            } else {

                alert("图片上传失败")

                vm.ErrVal = "图片上传失败"

            }

              return rst;

            }})



        }

        this.files.splice(5)

        this.$store.commit('set_img_upload_cache', this.files.slice(0, 5)) // 存储文件缓存

        this.$store.commit('set_img_status', 'selected') // 更新文件上传状态

      }