美文网首页
兼容ios和安卓的文件选择上传方式(H5)

兼容ios和安卓的文件选择上传方式(H5)

作者: 大号火龙果 | 来源:发表于2022-11-17 14:19 被阅读0次
fileUp() {
              const address = config.baseURL + '/h5-server/h5/base/train/supplier/notice/upload/file'
              const fileInput = document.createElement('input')
              const that = this
              fileInput.setAttribute('type', 'file');
              fileInput.setAttribute('style', 'display:none');
              let ua = navigator.userAgent.toLowerCase()
              let phone = ""
              if (ua.indexOf("android") != -1) {
                  phone = true //true是安卓 false是ios
              } else if (ua.indexOf("iphone") != -1) {
                  phone = false
              }
              fileInput.setAttribute('accept', phone == true ? '*/*' : '');
              fileInput.addEventListener('change', () => {
                  const file = fileInput.files[0];
                  const reader = new FileReader();
                  reader.readAsDataURL(file);
                  reader.onload = function() {
                      if (file.size / 1024 / 1024 > 80) {
                          console.log('文件大小不超过80Mb');
                          return;
                      }
                      const data = new FormData();
                      data.append('name', file);
                      let r = new XMLHttpRequest();
                      r.open("post", address);
                      uni.showLoading({
                          title: "上传中,请稍等..."
                      })
                      try {
                          r.onloadend = () => {
                              const con = JSON.parse(r.responseText)

                              upd({
                                  id: that.id,
                                  planFile: JSON.stringify(con.content)
                              }).then((res) => {
                                  uni.hideLoading()
                                  that.$u.toast('提交成功')
                                  setTimeout(() => {
                                      uni.navigateBack()
                                  }, 500)
                              })
                          }
                          r.send(data);
                      } catch (e) {
                          that.$u.toast(JSON.stringify(e))
                          //TODO handle the exception
                      }

                  };
              });
              const page = document.getElementById('page')
              page.appendChild(fileInput)
              fileInput.click();
          },

相关文章

网友评论

      本文标题:兼容ios和安卓的文件选择上传方式(H5)

      本文链接:https://www.haomeiwen.com/subject/atjpxdtx.html