上传

src/pages/subPages/balance.vue

@@ -1,7 +1,7 @@
 <template>
 <el-container direction="vertical">
     <!-- <el-header height="40px" style="border-bottom: 1px solid #eee">余额充值</el-header> -->
-    <div style="margin:10px 0;">
+    <div style="margin:20px 0;">
         <el-date-picker v-model="dataRange" :clearable="false" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
         <!-- <el-input placeholder="请输入订单ID" v-model="searchValue" style="width:200px;margin-left:10px;margin-right:10px;" />
         <el-select v-model="balanceStatus" placeholder="--请选择状态--">
@@ -14,6 +14,7 @@
         </el-select> -->
         <el-button style="margin-left:10px;" type="primary" @click="onSearch">查询</el-button>
         <el-button style="margin-left:10px;" type="danger" @click="onReset">重置</el-button>
+        <el-button style="margin-left:10px;" type="warning" @click="uploadDialogVisible = true">上传</el-button>
     </div>
 
     <el-table :data="tableData" border style="width: 100%;">
@@ -30,7 +31,7 @@
         <el-table-column align="center" prop="payment_type" label="充值时间"></el-table-column>
         <el-table-column align="center" prop="recharge_code" label="充值凭证">
             <el-button type="success" size="small" @click="seeDialogVisible = true">查看</el-button>
-            <el-button size="small" type="primary" @click="uploadDialogVisible = true">上传</el-button>
+            <!-- <el-button size="small" type="primary" @click="uploadDialogVisible = true">上传</el-button> -->
             <!-- <el-upload
                 class="upload-demo"
                 action=""
@@ -59,20 +60,44 @@
     </el-dialog>
 
     <!-- 上传弹层 -->
-    <!-- <el-dialog title="上传凭证" :visible.sync="uploadDialogVisible" width="20%">
-        <el-upload
-            class="avatar-uploader"
-            action="https://jsonplaceholder.typicode.com/posts/"
-            :show-file-list="false"
-            :on-success="handleAvatarSuccess"
-            :before-upload="beforeAvatarUpload">
-            <img v-if="imageUrl" :src="imageUrl" class="avatar">
-            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-        </el-upload>
-    </el-dialog> -->
+    <el-dialog title="上传凭证" :visible.sync="uploadDialogVisible" class="updata">
+        <el-form :model="formData" label-width="120px">
+            <el-form-item label="充值金额： ">
+                <el-input v-model="formData.amount" style="width:300px"></el-input>
+            </el-form-item>
+            <el-form-item label="开户人姓名： ">
+                <el-input v-model="formData.bank_username" style="width:300px"></el-input>
+            </el-form-item>
+            <el-form-item label="银行名称： ">
+                <el-input v-model="formData.bank_name" style="width:300px"></el-input>
+            </el-form-item>
+            <el-form-item label="充值凭证： ">
+                <!-- <el-upload
+                    class="avatar-uploader"
+                    action="http://192.168.1.195/mobile/index.php?act=merchant_recharge&op=voucherupload&client_type=ajax"
+                    :show-file-list="false"
+                    :on-success="handleAvatarSuccess"
+                    :before-upload="beforeAvatarUpload">
+                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
+                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                </el-upload> -->
+                <!-- <input type="file" res="fileInput" name="fileContent" @change="inputChange"> -->
+               <input type="file" ref="fileId" @change="getFile">
+            </el-form-item>
+        </el-form>
+        <!-- <form action="/test/" method="POST" enctype="multipart/form-data">
+            <p>名称：<input type="text" name="user"></p>
+            <p>文件：<input type="file" name="testfile"></p>
+            <p><input type="submit" value="提交"></p>
+        </form> -->
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="dialogVisible = false">取 消</el-button>
+            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+        </span>
+    </el-dialog>
 </el-container>
 </template>
-
+<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
 <script>
 import {
     balanceList
@@ -106,8 +131,19 @@ export default {
             'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
             ],
             // 上传弹层
-            uploadDialogVisible: false,
-            imageUrl: ''
+            uploadDialogVisible: true,
+            imageUrl: '',
+            // 上传数据
+            formData: {
+                // 充值金额
+                amount: '',
+                // 开户人姓名
+                bank_username: '',
+                // 银行名称
+                bank_name: '',
+                // 充值凭证
+                voucher: ''
+            }
         };
     },
     mounted() {
@@ -160,20 +196,34 @@ export default {
         },
         // 	文件上传成功时的钩子
         handleAvatarSuccess(res, file) {
+            console.log('res', res);
+            console.log('file', file);
             this.imageUrl = URL.createObjectURL(file.raw);
         },
         // 上传文件之前的钩子
         beforeAvatarUpload(file) {
-            const isJPG = file.type === 'image/jpeg';
-            const isLt2M = file.size / 1024 / 1024 < 2;
-
-            if (!isJPG) {
-                this.$message.error('上传头像图片只能是 JPG 格式!');
-            }
-            if (!isLt2M) {
-                this.$message.error('上传头像图片大小不能超过 2MB!');
+            console.log('file', file);
+        },
+        // input改变
+        getFile(){
+            //获取file内容
+            let files = this.$refs.fileId.files[0];
+            this.xlsxFile = files;
+            console.log('files', files);
+            this.importRow()
+        },
+        importRow() {
+            let that = this;
+            if (that.xlsxFile == "") {
+                that.$message.error('请先添加文件');
+                return;
             }
-            return isJPG && isLt2M;
+            // vue 中使用 window.FormData(),否则会报 'FormData isn't definded'
+            //创建一个FormData对象，然后通过append() 方法向对象中添加键值对
+            let formData = new window.FormData(); 
+            formData.append("file", that.xlsxFile);
+            console.log('that.xlsxFile', that.xlsxFile);
+            console.log('formData', formData.get(file));
         }
     },
 }
@@ -184,12 +234,12 @@ export default {
     display: inline-block;
     margin-left: 10px;
 }
-.seeDialog /deep/.el-dialog__body {
+/* .seeDialog /deep/.el-dialog__body {
     text-align: center;
-}
-.avatar-uploader {
+} */
+/* .avatar-uploader {
     text-align: center;
-}
+} */
 .avatar-uploader /deep/.el-upload {
   border: 1px dashed hsl(0, 0%, 85%);
   border-radius: 6px;
@@ -213,4 +263,7 @@ export default {
   height: 178px;
   display: block;
 }
+.updata /deep/ .el-dialog__footer {
+    text-align: center;
+}
 </style>