官网预览优化

1

src/views/muiscDetial/index.tsx

@@ -42,12 +42,13 @@ import videoIcon from '@/components/col-header/images/videoIcon.png'
 import noVideoIcon from '@/components/col-header/images/noVideoIcon.png'
 import vipIcon from '@/components/col-header/images/vipIcon.png'
 import noVipIcon from '@/components/col-header/images/noVipIcon.png'
-
+import umiRequest from 'umi-request'
 import request from '@/helpers/request'
 import { useRoute, useRouter } from 'vue-router'
 import gou from './images/gou.png'
 import member from './images/member.png'
 import palyer from './images/palyer.png'
+import { extend } from 'umi-request'
 // import vipIcon from '../images/vipIcon.png'
 import {
   getUserType,
@@ -183,8 +184,8 @@ export default defineComponent({
               const showImg = convasToImg(tempCanvas)
 
               //  开始上传图片
-              // uploadFunction(showImg)
-              state.showImg = showImg
+              uploadFunction(showImg)
+
             },
             false
           )
@@ -244,9 +245,23 @@ export default defineComponent({
         state.userType == 'STUDENT' || !state.userType ? true : false
       // 拼链接
     })
-    const uploadFunction =async (file) => {
+    const base64ToBlob = data => {
+      var arr = data.split(','),
+        mime = arr[0].match(/:(.*?);/)[1]
+
+      let bstr = atob(arr[1])
+      let n = bstr.length
+      let u8arr = new Uint8Array(n)
+
+      while (n--) {
+        u8arr[n] = bstr.charCodeAt(n)
+      }
+      return new Blob([u8arr], { type: mime })
+    }
+    const uploadFunction = async file => {
       try {
-        let fileName = state.musicDetail.musicSheetName.replaceAll(' ', '_')
+        const formData = new FormData()
+        let fileName = new Date().getTime()+state.musicDetail.musicSheetName.replaceAll(' ', '_')+'.png'
         let key = new Date().getTime() + fileName
         let obj = {
           filename: fileName,
@@ -258,21 +273,42 @@ export default defineComponent({
             unknowValueField: []
           }
         }
-        const { data } = await request.post('/api-website/getUploadSign', {
+
+        const res = await request.post('/api-website/getUploadSign', {
           data: obj
         })
+
         state.dataObj = {
-          policy: data.policy,
-          signature: data.signature,
+          policy: res.data.policy,
+          signature: res.data.signature,
           key: key,
-          KSSAccessKeyId: data.kssAccessKeyId,
+          KSSAccessKeyId: res.data.kssAccessKeyId,
           acl: 'public-read',
           name: fileName
         }
+        for (let key in state.dataObj) {
+          formData.append(key, state.dataObj[key])
+        }
+        // const imgRes = await fetch(file)
+        const files = base64ToBlob(file)
+        // const files = await imgRes.blob()
+
+        formData.append('file', files, fileName)
+        await umiRequest(state.ossUploadUrl, {
+          method: 'POST',
+          data: formData
+        })
+
+      let imgurl = state.ossUploadUrl + '/' +key
+        const ress = await request.post('/api-website/open/music/sheet/img', {
+          data: {musicSheetId:state.musicDetail.id,musicImg:imgurl}
+        })
+        state.showImg = imgurl
       } catch (e) {
         console.log(e)
       }
     }
+
     const setUser = () => {
       state.iconList = [] as any
       if (state.teacherDetail.tag.indexOf('STYLE') != -1) {