音频管理 显示上传文件名称

src/views/music/list/detail.vue

@@ -27,8 +27,12 @@
         <Upload listType="picture-card" :url="form.thumbUrl" @upload="upload($event, 'thumbUrl')"
           :disabled="disabled" />
       </el-form-item>
-      <el-form-item label="音频文件：" prop="progaramUrl">
-        <Upload listType="audio" :size="100" @upload="upload($event, 'progaramUrl')" />
+      <el-form-item label="音频文件：" prop="realName">
+        <el-input v-model="form.realName" readonly>
+          <template slot="suffix">
+            <Upload listType="audio" :size="100" @upload="upload($event, 'progaramUrl')" />
+          </template>
+        </el-input>
         <div style="color:#909399">单个上传音频文件不超过100MB</div>
       </el-form-item>
     </el-form>
@@ -55,7 +59,8 @@ export default {
       singerOptions: [],
       // 表单
       form: {
-        status: 1
+        status: 1,
+        realName: ''
       },
       // 是否只读
       disabled: false,
@@ -76,8 +81,8 @@ export default {
         thumbUrl: [{
           required: true, message: '请上传音频封面', trigger: 'change'
         }],
-        progaramUrl: [{
-          required: true, message: '请上传音频文件', trigger: 'change'
+        realName: [{
+          required: true, message: '请上传音频文件', trigger: 'blur'
         }]
       }
     };
@@ -134,6 +139,7 @@ export default {
       } else {
         this.form.progaramUrl = e.file.url
         this.form.playTime = e.file.time
+        this.form.realName = e.file.realName
       }
     },
 
@@ -167,4 +173,8 @@ export default {
 .el-form {
   width: 500px;
 }
+
+::v-deep .el-input__suffix {
+  right: 0;
+}
 </style>