| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125 |
- <!DOCTYPE html>
- <html lang="zh">
- <head>
- <meta charset="UTF-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>播客上传声音</title>
- </head>
- <body>
- <div>
- <a href="/qrlogin-nocookie.html">
- 如果没登录,请先登录
- </a>
- </div>
- <div id="app">
- <ul>
- <li v-for="(item,index) in voicelist" @click="currentVoiceIndex=index"
- :class="{active:currentVoiceIndex===index}">
- <img :src="item.coverUrl" style="width:50px;width:50px;" />
- <ul>
- <li v-for="(item2,index) in item.voiceListData">
- {{item2.voiceName}}
- </li>
- </ul>
- {{item.voiceListName}}
- </li>
- </ul>
- <input v-model="songName" placeholder="请输入声音名称" />
- <input v-model="description" placeholder="请输入介绍" />
- <input type="file" name="songFile" />
- <button @click="submit">上传</button>
- </div>
- <script src="https://cdn.jsdelivr.net/npm/axios@0.26.1/dist/axios.min.js"></script>
- <script src="https://cdn.jsdelivr.net/npm/vue"></script>
- <script>
- Vue.createApp({
- data() {
- return {
- songName: '',
- description: '',
- voicelist: [],
- cookieToken: '',
- currentVoiceIndex: 0,
- }
- },
- created() {
- this.getData()
- },
- computed: {
- currentVoice() {
-
-
-
-
-
-
- return this.voicelist[this.currentVoiceIndex]
- },
- },
- methods: {
- submit() {
- console.log('submit')
- const file = document.querySelector('input[type=file]').files[0]
- this.upload(file)
- },
- async getData() {
- const res = await axios({
- url: `/voicelist/search?cookie=${localStorage.getItem('cookie')}`,
- })
- console.log(res.data.data)
- this.voicelist = res.data.data.list
- this.voicelist.map(async i => {
- const res2 = await axios({
- url: `/voicelist/list?voiceListId=${i.voiceListId}&limit=5`,
- })
- i.voiceListData = res2.data.data.list
- console.log(res2);
- })
- },
- upload(file) {
- var formData = new FormData()
- formData.append('songFile', file)
- axios({
- method: 'post',
- url: `/voice/upload?time=${Date.now()}&cookie=${localStorage.getItem('cookie')
- }&songName=${this.songName}&voiceListId=${this.currentVoice.voiceListId
- }&categoryId=${this.currentVoice.categoryId}&coverImgId=${this.currentVoice.coverImgId
- }&secondCategoryId=${this.currentVoice.secondCategoryId}&description=${this.description
- }&privacy=1`,
- headers: {
- 'Content-Type': 'multipart/form-data',
- },
- data: formData,
- })
- .then((res) => {
- alert(`${file.name} 上传成功`)
- if (currentIndx >= fileLength) {
- console.log('上传完毕')
- }
- })
- .catch(async (err) => {
- console.log(err)
- })
- },
- },
- }).mount('#app')
- </script>
- <style>
- ul li {
- cursor: pointer;
- }
- ul li.active {
- color: red;
- }
- </style>
- </body>
- </html>
|
