杨泽宇 / cms_songs · Commits

Commit c4709a4248e06c8ad4720e12c77335a3ab1724a6

Authored by 杨泽宇
1 parent 9d83c27e

change progress for file upload

Inline Side-by-side
Showing 3 changed files with 217 additions and 45 deletions
dist/audio.html
  View file @c4709a4
... ... @@ -69,22 +69,28 @@
69 69 </el-form-item>
70 70 <el-divider></el-divider>
71 71 <el-form-item style="width: 50%; text-align: left;">
72   - <span style="color: #4A90E2; font-size: 20px" v-if="percent > 0 && percent < 100">已上传{{Math.ceil(percent)}}%，请耐心等待……</span>
73   - <span style="color: #4A90E2; font-size: 20px" v-if="percent == 100">上传完成</span>
  72 + <span style="color: #4A90E2; font-size: 20px">{{form.audioFile?.name}} </span>
  73 + <span style="color: #4A90E2; font-size: 20px" v-if="percent > 0 && percent < 100"> 已上传{{Math.ceil(percent)}}%，请耐心等待……</span>
  74 + <span style="color: #4A90E2; font-size: 20px" v-if="percent == 100"> 上传完成</span>
74 75 </el-form-item>
75 76 <el-form-item style="width: 50%; text-align: right;">
76 77 <el-button @click="reset" v-if="form.channelId == 1279">取消</el-button>
77   - <el-button @click="reset" v-else :disabled="!form.audioId">取消</el-button>
  78 + <el-button @click="reset" v-else :disabled="!form.audioFile || submitDisabled">取消</el-button>
78 79  
79   - <el-button type="danger" @click="submitForm" v-if="form.channelId == 1279">确定上传</el-button>
80   - <el-button type="danger" @click="submitForm" v-else :disabled="!form.audioId">确定上传</el-button>
  80 + <!-- <el-button type="danger" @click="submit('songs')" v-if="form.channelId == 1279">确定上传</el-button>
  81 + <el-button type="danger" @click="submit('songs')" v-if="form.channelId == 1279">确定上传</el-button>
  82 + <el-button type="danger" @click="submit('songs')" v-else>确定上传</el-button> -->
  83 + <!-- <el-button type="danger" @click="submit('songs')" v-else :disabled="!form.audioId">确定上传</el-button> -->
  84 +
  85 + <el-button type="danger" @click="submit('songs')" v-if="form.channelId == 1279">确定上传</el-button>
  86 + <el-button type="danger" @click="submit('songs')" v-else :disabled="!form.audioFile || submitDisabled">确定上传</el-button>
81 87 </el-form-item>
82 88 </el-form>
83 89 </div>
84 90 </el-card>
85 91 </div>
86 92 <script src="https://cdn.jsdelivr.net/npm/vue@3.2.11/dist/vue.global.js"></script>
87   - <script src="https://cdn.jsdelivr.net/npm/element-plus"></script>
  93 + <script src="https://cdn.jsdelivr.net/npm/element-plus@1.1.0-beta.12"></script>
88 94 <script src="https://cdn.jsdelivr.net/npm/axios@0.17.1/dist/axios.min.js"></script>
89 95 <script src="https://cdn.jsdelivr.net/npm/qiniu-js@2.5.5/dist/qiniu.min.js"></script>
90 96 <script src="/bundle.js"></script></body>
... ...
src/html/index.html
  View file @c4709a4
... ... @@ -69,22 +69,28 @@
69 69 </el-form-item>
70 70 <el-divider></el-divider>
71 71 <el-form-item style="width: 50%; text-align: left;">
72   - <span style="color: #4A90E2; font-size: 20px" v-if="percent > 0 && percent < 100">已上传{{Math.ceil(percent)}}%，请耐心等待……</span>
73   - <span style="color: #4A90E2; font-size: 20px" v-if="percent == 100">上传完成</span>
  72 + <span style="color: #4A90E2; font-size: 20px">{{form.audioFile?.name}} </span>
  73 + <span style="color: #4A90E2; font-size: 20px" v-if="percent > 0 && percent < 100"> 已上传{{Math.ceil(percent)}}%，请耐心等待……</span>
  74 + <span style="color: #4A90E2; font-size: 20px" v-if="percent == 100"> 上传完成</span>
74 75 </el-form-item>
75 76 <el-form-item style="width: 50%; text-align: right;">
76 77 <el-button @click="reset" v-if="form.channelId == 1279">取消</el-button>
77   - <el-button @click="reset" v-else :disabled="!form.audioId">取消</el-button>
  78 + <el-button @click="reset" v-else :disabled="!form.audioFile || submitDisabled">取消</el-button>
78 79  
79   - <el-button type="danger" @click="submitForm" v-if="form.channelId == 1279">确定上传</el-button>
80   - <el-button type="danger" @click="submitForm" v-else :disabled="!form.audioId">确定上传</el-button>
  80 + <!-- <el-button type="danger" @click="submit('songs')" v-if="form.channelId == 1279">确定上传</el-button>
  81 + <el-button type="danger" @click="submit('songs')" v-if="form.channelId == 1279">确定上传</el-button>
  82 + <el-button type="danger" @click="submit('songs')" v-else>确定上传</el-button> -->
  83 + <!-- <el-button type="danger" @click="submit('songs')" v-else :disabled="!form.audioId">确定上传</el-button> -->
  84 +
  85 + <el-button type="danger" @click="submit('songs')" v-if="form.channelId == 1279">确定上传</el-button>
  86 + <el-button type="danger" @click="submit('songs')" v-else :disabled="!form.audioFile || submitDisabled">确定上传</el-button>
81 87 </el-form-item>
82 88 </el-form>
83 89 </div>
84 90 </el-card>
85 91 </div>
86 92 <script src="https://cdn.jsdelivr.net/npm/vue@3.2.11/dist/vue.global.js"></script>
87   - <script src="https://cdn.jsdelivr.net/npm/element-plus"></script>
  93 + <script src="https://cdn.jsdelivr.net/npm/element-plus@1.1.0-beta.12"></script>
88 94 <script src="https://cdn.jsdelivr.net/npm/axios@0.17.1/dist/axios.min.js"></script>
89 95 <script src="https://cdn.jsdelivr.net/npm/qiniu-js@2.5.5/dist/qiniu.min.js"></script>
90 96 </body>
... ...
src/js/audios.js
  View file @c4709a4
... ... @@ -33,8 +33,7 @@ const Audio = {
33 33 {
34 34 required: true,
35 35 trigger: "change",
36   - message: "请填写歌曲名字",
37   - // validator: all.validateName,
  36 + message: "请填写歌曲名字"
38 37 },
39 38 ],
40 39 name: [
... ... @@ -45,7 +44,7 @@ const Audio = {
45 44 required: true,
46 45 trigger: "change",
47 46 message: "请填写格式正确的手机号码",
48   - // validator: all.validatePhone,
  47 + validator: all.validatePhone,
49 48 },
50 49 ],
51 50 audioFile: [
... ... @@ -67,6 +66,7 @@ const Audio = {
67 66 fileList: [],
68 67 token: "",
69 68 btnDisabled: false,
  69 + submitDisabled: false,
70 70 msgText:
71 71 "只能上传一个mp3/flac/wav/ogg格式的音频文件,且不超过500mb。上传过程中请勿刷新页面。",
72 72 percent: 0,
... ... @@ -91,9 +91,9 @@ const Audio = {
91 91 for (let i in this.form) {
92 92 this.form[i] = null;
93 93 }
94   - this.form["channelId"] = 1278;
95 94 this.percent = 0;
96 95 this.btnDisabled = false;
  96 + this.submitDisabled = false;
97 97 },
98 98 handleRemove(file, list) {
99 99 if (this.percent < 100) {
... ... @@ -126,34 +126,193 @@ const Audio = {
126 126 }
127 127 });
128 128 },
129   - submitForm(formName) {
130   - this.form.lyric = this.form.lyric? this.form.lyric.trim(): ''
131   - all
132   - .request({
133   - url: "http://cmstest.cnlive.com:8768/contentApi/audioSave",
134   - method: "post",
135   - params: this.form,
136   - withCredentials: true,
137   - headers: {
138   - "X-Requested-With": "XMLHttpRequest",
139   - "Access-Control-Allow-Origin": "*",
140   - "content-type": "application/json;charset=UTF-8",
141   - },
142   - })
143   - .then((res) => {
144   - if (res.data) {
145   - setTimeout(() => {
146   - window.location.replace("./success.html");
147   - }, 1000);
148   - } else {
149   - setTimeout(() => {
150   - window.location.replace("./failed.html");
151   - }, 1000);
  129 + submit(formName) {
  130 + this.$refs[formName].validate((valid) => {
  131 + if (valid) {
  132 + this.submitDisabled = true;
  133 + this.btnDisabled = true;
  134 + if (this.form.channelId == 1279) {
  135 + this.postCms();
  136 + } else {
  137 + const fileName = this.form.audioFile.raw.name.split(".");
  138 + fileName.splice(fileName.length - 1, 1);
  139 + this.curFile = this.form.audioFile.name;
  140 + this.form.audioId = null;
  141 + const that = this;
  142 + const fileBaseObj = {
  143 + videoName: fileName.join("."),
  144 + md5: null,
  145 + };
  146 + const fileSaveObj = {
  147 + videoId: null,
  148 +
  149 + multipleCategory: 100005,
  150 + tag: "test",
  151 + synopsis: "test",
  152 + mmsType: 0,
  153 + videoType: 11003,
  154 + videoType: 0,
  155 + masterId: 10494974,
  156 + };
  157 + const fileInitObj = {
  158 + gfmt: this.form.audioFile.raw.name.split(".").reverse().shift(),
  159 + fileSize: this.form.audioFile.raw.size,
  160 + videoType: 11003,
  161 + ptpwVal: 0,
  162 + archiveStatus: 0,
  163 + multipleCategory: 100005,
  164 + uploadLine: 2,
  165 + masterId: 10494974,
  166 + };
  167 + const fileWholeObj = {
  168 + file: this.form.audioFile.raw,
  169 + uploadStatus: "ready",
  170 + proCount: 0,
  171 + fileKey: null,
  172 + observable: null,
  173 + subscription: null,
  174 + };
  175 +
  176 + if (this.token == null) {
  177 + this.$message({
  178 + type: "error",
  179 + message: "获取七牛token失败，请联系管理员",
  180 + });
  181 + return false;
152 182 }
153   - })
154   - .catch((error) => {
155   - console.log(error);
156   - });
  183 +
  184 + const observer = {
  185 + next(res) {
  186 + if (res.total.percent >= 99) {
  187 + that.percent = 99;
  188 + } else {
  189 + that.percent = Math.ceil(res.total.percent);
  190 + }
  191 + },
  192 + error(err) {
  193 + console.log(err);
  194 + },
  195 + complete(res) {
  196 + all
  197 + .request({
  198 + url: all.urls.base + all.urls.save,
  199 + method: "get",
  200 + params: {
  201 + hash: res.hash,
  202 + key: res.key,
  203 + vid: fileSaveObj.videoId,
  204 + },
  205 + })
  206 + .then((res) => {
  207 + console.log(res);
  208 + })
  209 + .catch((error) => {
  210 + return all.request({
  211 + url: all.urls.onlineUrl + all.urls.transcode,
  212 + params: { ...fileBaseObj, ...fileSaveObj },
  213 + method: "get",
  214 + });
  215 + })
  216 + .then((data) => {
  217 + that.form.audioId = data.data.data.obj;
  218 + // that.btnDisabled = false;
  219 + that.percent = 100;
  220 + that.postCms();
  221 + })
  222 + .catch((error) => {
  223 + console.log(error);
  224 + });
  225 + },
  226 + };
  227 +
  228 + Promise.all([
  229 + all.validateVideoSize(fileInitObj.fileSize),
  230 + all.validateVideoFormat(fileInitObj.gfmt),
  231 + all.validateNameLength(fileBaseObj.videoName),
  232 + ])
  233 + .then((check) => {
  234 + return this.initMd5(this.form.audioFile.raw);
  235 + })
  236 + .then((n) => {
  237 + fileBaseObj.md5 = n;
  238 + return all.request({
  239 + url: all.urls.onlineUrl + all.urls.initFileOnline,
  240 + method: "get",
  241 + params: { ...fileBaseObj, ...fileInitObj },
  242 + });
  243 + })
  244 + .then((res) => {
  245 + if (res && res.data) {
  246 + fileSaveObj.videoId = res.data.data.obj.vid;
  247 + fileWholeObj.fileKey = res.data.data.obj.originPath;
  248 + all.putExtra.params["x:name"] = fileWholeObj.fileKey;
  249 + fileWholeObj.observable = qiniu.upload(
  250 + this.form.audioFile.raw,
  251 + fileWholeObj.fileKey,
  252 + this.token,
  253 + all.putExtra,
  254 + all.cdnConfig
  255 + );
  256 + fileWholeObj.subscription =
  257 + fileWholeObj.observable.subscribe(observer);
  258 + } else {
  259 + this.$message({
  260 + type: "error",
  261 + duration: 0,
  262 + message: "未知错误，请联系管理员。",
  263 + });
  264 + }
  265 + })
  266 + .catch((error) => {
  267 + this.$message({
  268 + type: "error",
  269 + message: error,
  270 + duration: 0,
  271 + });
  272 + });
  273 + }
  274 + } else {
  275 + this.$message.error("请检查表单内容");
  276 + this.submitDisabled = false;
  277 + this.btnDisabled = false;
  278 + return false;
  279 + }
  280 + });
  281 + },
  282 + postCms() {
  283 + this.form.lyric = this.form.lyric ? this.form.lyric.trim() : "";
  284 + all
  285 + .request({
  286 + url: "http://cmstest.cnlive.com:8768/contentApi/audioSave",
  287 + method: "post",
  288 + params: this.form,
  289 + withCredentials: true,
  290 + headers: {
  291 + "X-Requested-With": "XMLHttpRequest",
  292 + "Access-Control-Allow-Origin": "*",
  293 + "content-type": "application/json;charset=UTF-8",
  294 + },
  295 + })
  296 + .then((res) => {
  297 + if (res.data) {
  298 + setTimeout(() => {
  299 + console.log("jump");
  300 + // window.location.replace("./success.html");
  301 + }, 1000);
  302 + } else {
  303 + setTimeout(() => {
  304 + console.log("jump");
  305 + // window.location.replace("./failed.html");
  306 + }, 1000);
  307 + }
  308 + })
  309 + .catch((error) => {
  310 + console.log(error);
  311 + })
  312 + .finally(() => {
  313 + this.btnDisabled = false;
  314 + this.submitDisabled = false;
  315 + });
157 316 },
158 317 getTxt(e) {
159 318 this.form.txtFile = e.raw;
... ... @@ -167,9 +326,10 @@ const Audio = {
167 326 reader.readAsArrayBuffer(file);
168 327 },
169 328 getMp3(file) {
170   - // this.msgText = '音频已开始上传，上传过程中请勿刷新页面。'
171   - this.btnDisabled = true;
  329 + // this.btnDisabled = true;
172 330 this.form.audioFile = file;
  331 + console.log(this.fileList);
  332 + return false;
173 333 const fileName = file.raw.name.split(".");
174 334 fileName.splice(fileName.length - 1, 1);
175 335 this.curFile = file.name;
... ...