当前位置: 首页>数据库>正文

开发中遇到的问题

1.vue3中的reactive不会自动更新视图,可以在reactive里多添加一层属性
2.echarts中封装组件会公用同一个id的元素,可以在封装组件时多传入一个id
3.echarts在初次渲染时不会显示,报警告,未获取宽高,需要在初始化表格时添加配置宽高。

vue中遇到的问题

1.设置下载pdf浏览器会预览问题
此方法也可解决下载时的名称问题

//fileName是pdf名称 、filePath是pdf地址
downloadFile_2(fileName, filePath) { 
  var ajax = new XMLHttpRequest()
  ajax.open('GET', filePath, true)
  ajax.setRequestHeader('Cache-Control', 'no-cache')
  ajax.setRequestHeader('Access-Control-Allow-Origin', '*')
  ajax.responseType = 'blob'
  ajax.onload = (e) => {
    console.log(e)
    let res = e.target.response
    // let blob = new Blob([res],{type: "application/pdf;charset=UTF-8"}) // 这里的res为后端返回的流数据
    let blob = new Blob([res])
    let aLink = document.createElement('a')
    aLink.download = `${fileName}.pdf` // 下载文件的名字
    aLink.href = URL.createObjectURL(blob)
    aLink.click()
  }
  ajax.send()
},

2.前端上传文件慢
使用OSS上传


async function uploadOss(file, callback) {
  // 根据文件名后缀,获取contentType
  const contentType = getContentType(file.name)
  // 调用授权接口,获取到上传地址
  const res = await axios({
    headers: { 'X-GW-AccessKey': window._env_.accessKey },
    method: 'post',
    url: getOssAuth,
    data: { fileName: file.name, contentType },
  })
  // oss返回结果
  const result = res && res.data && res.data.data
  if (result) {
    // 根据oss授权返回的地址,上传文件
    let reader = new FileReader()
    return new Promise((resolve, reject) => {
      reader.readAsArrayBuffer(file)
      reader.onload = async (e) => {
        // 将File对象通过FileReader读出转换为Blob二进制流对象
        const blob = new Blob([e.target.result])
        // 调用上传
        const response = await axios({
          headers: result.uploadHeaders,
          method: result.requestMethod,
          url: result.serviceUrl,
          data: blob,
          onUploadProgress: (progressEvent) => {
            // 原生获取上传进度的事件
            if (progressEvent.lengthComputable) {
              callback && callback(progressEvent)
            }
          },
        })
        const responseCode = response && response.status
        // 201代表上传成功
        if (responseCode == 201) {
          let fileUrl = result && result.fileUrl
          const index = fileUrl.lastIndexOf('/')
          const fileName = fileUrl.substring(index + 1)
          // 如果是word或者excel,对url做个编码
          const fileType = getFileType(fileName) && getFileType(fileName)[0] // ['word','docx']这种格式
          fileUrl = fileType == 'word' || type == 'excel' encodeURIComponent(fileUrl) : fileUrl
          const data = {
            fileName,
            fileUrl,
            fileType,
          }
          resolve(data)
        }
        return false
      }
    })
  }
  return false
}

小程序中的问题

1.scroll-view enable-flex不生效
解决方案:父级设置white-space:nowrap 子级设置:display:inline-block


https://www.xamrdz.com/database/6fj1994264.html

相关文章: