From 39f1ad026cfc6faede09793dccb166ceeef7b1b6 Mon Sep 17 00:00:00 2001
From: liaozetao <1107136310@qq.com>
Date: Tue, 9 Jan 2024 15:47:01 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=B8=8A=E4=BC=A0=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/common/upload.js           |   5 +-
 src/views/users/GiftManageView.vue | 178 ++++++++++++-----------------
 2 files changed, 77 insertions(+), 106 deletions(-)

diff --git a/src/api/common/upload.js b/src/api/common/upload.js
index 2611be0..69de05b 100644
--- a/src/api/common/upload.js
+++ b/src/api/common/upload.js
@@ -23,9 +23,10 @@ export const uploadFile = id => {
     });
 };
 
-export const uploadGift = (id) => {
+export const uploadGift = (file) => {
     let formData = new FormData();
-    formData.append('file', $(id)[0].files[0]);
+    console.log(file);
+    formData.append('file', file);
     return new Promise((resolve, reject) => {
         request.post('/admin/gift/upload', formData).then(res => {
             resolve(res);
diff --git a/src/views/users/GiftManageView.vue b/src/views/users/GiftManageView.vue
index dfc6c91..d83d8b1 100644
--- a/src/views/users/GiftManageView.vue
+++ b/src/views/users/GiftManageView.vue
@@ -288,7 +288,7 @@
                             <label class="col-sm-2 control-label">礼物图片:</label>
                             <div class="col-sm-10">
                                 <img src="" id="picImage" style="width:250px;height:90px;" alt="">
-                                <input type="file" id="picUploadFile" name="file">
+                                <input type="file" id="picUploadFile" name="file" @change="changeFile($event)">
                                 <button class="btn btn-success" type="button" id="picUploadBtn">上传</button>
                                 <input type="hidden" id="picUrl" name="picUrl" class="form-control validate[required]" />
                                 <span id="picImgInfo" style="color:red;"></span>
@@ -551,10 +551,16 @@
 <script>
 import TableHelper from '@/utils/bootstrap-table-helper';
 import ComboboxHelper from '@/assets/plugins/bootstrap-combobox/js/bootstrap-combobox-helper';
-import { formatTime, showLoading, hideLoading } from '@/utils/maintainer';
+import { formatTime, showLoading, hideLoading, apiResult } from '@/utils/maintainer';
+import { uploadGift } from '@/api/common/upload';
 
 export default {
     name: "GiftManageView",
+    data() {
+        return {
+            files: {},
+        };
+    },
     setup() {
         function selectConsumeChange(obj) {
             var val = $('#consumeType').val();
@@ -594,9 +600,15 @@ export default {
         });
     },
     methods: {
+        changeFile(event) {
+            console.log(event);
+            let target = event.target;
+            let id = target.id;
+            this.files[id] = target.files[0];
+        },
         initData() {
+            let $this = this;
             $(function () {
-
                 $('#table').bootstrapTable('destroy');
                 $('#table').bootstrapTable({
                     columns: [
@@ -819,6 +831,7 @@ export default {
                 $("#gift-add").click(function () {
                     // 打开编辑弹窗
                     $("#giftModal").modal('show');
+                    $this.files = {};
                     $("#giftForm")[0].reset();
 
                     $('#picUrl').val('');
@@ -979,122 +992,78 @@ export default {
 
                 $('#picUploadBtn').on('click', function () {
                     showLoading();
-                    $.ajaxFileUpload({
-                        fileElementId: 'picUploadFile',    //需要上传的文件域的ID，即<input type="file">的ID。
-                        url: '/admin/gift/upload', //后台方法的路径
-                        type: 'post',   //当要提交自定义参数时，这个参数要设置成post
-                        dataType: 'json',   //服务器返回的数据类型。可以为xml,script,json,html。如果不填写，jQuery会自动判断。
-                        secureuri: false,   //是否启用安全提交，默认为false。
-                        async: true,   //是否是异步
-                        success: function (json) {   //提交成功后自动执行的处理函数，参数data就是服务器返回的数据。
-                            if (json.path) {
-                                $('#picUrl').val(json.path);
-                                $('#picImage').attr("src", json.path);
-                                if (json.path != '') {
-                                    $("#picImgInfo").html('已上传成功');
-                                } else {
-                                    $("#picImgInfo").html('未上传成功');
-                                }
-                                console.log(json.path);
-                                hideLoading();
-                            } else {
-                                $("#tipMsg").text(json.msg);
-                                $("#tipModal").modal('show');
-                                hideLoading();
-                            }
-                        },
-                        error: function (data, status, e) {  //提交失败自动执行的处理函数。
-                            console.error(e);
-                            hideLoading();
+                    uploadGift($this.files['picUploadFile']).then(res => {
+                        let path = res.path;
+                        console.log(path);
+                        $('#picUrl').val(path);
+                        $('#picImage').attr("src", path);
+                        if (path != '') {
+                            $("#picImgInfo").html('已上传成功');
+                        } else {
+                            $("#picImgInfo").html('未上传成功');
                         }
+                        hideLoading();
+                    }).catch(e => {
+                        console.error(e);
+                        hideLoading(); 
                     });
-                })
+                });
 
                 $('#vggUploadBtn').on('click', function () {
                     showLoading();
-                    $.ajaxFileUpload({
-                        url: '/admin/gift/upload',//后台请求地址
-                        type: 'post',//请求方式  当要提交自定义参数时，这个参数要设置成post
-                        secureuri: false,//是否启用安全提交，默认为false。
-                        fileElementId: 'vggUploadFile',// 需要上传的文件域的ID，即<input type="file">的ID。
-                        dataType: 'json',//服务器返回的数据类型。可以为xml,script,json,html。如果不填写，jQuery会自动判断。如果json返回的带pre,这里修改为json即可解决。
-                        success: function (json, status) {//提交成功后自动执行的处理函数，参数data就是服务器返回的数据。
-                            console.log(json);
-                            if (json.path) {
-                                $('#vggUrl').val(json.path);
-                                $('#vggImage').attr("src", json.path);
-                                if (json.path != '') {
-                                    $("#vggImgInfo").html('已上传成功');
-                                } else {
-                                    $("#vggImgInfo").html('未上传成功');
-                                }
-                                console.log(json.path);
-                                hideLoading();
-                            } else {
-                                $("#tipMsg").text(json.msg);
-                                $("#tipModal").modal('show');
-                                hideLoading();
-                            }
+                    uploadGift($this.files['vggUploadFile']).then(res => {
+                        let path = res.path;
+                        console.log(path);
+                        $('#vggUrl').val(path);
+                        $('#vggImage').attr("src", path);
+                        if (path != '') {
+                            $("#vggImgInfo").html('已上传成功');
+                        } else {
+                            $("#vggImgInfo").html('未上传成功');
                         }
-                    });
-                })
+                        hideLoading();
+                    }).catch(e => {
+                        console.error(e);
+                        hideLoading(); 
+                    }); 
+                });
 
                 $('#svgaUploadBtn').on('click', function () {
                     showLoading();
-                    $.ajaxFileUpload({
-                        url: '/admin/gift/upload',//后台请求地址
-                        type: 'post',//请求方式  当要提交自定义参数时，这个参数要设置成post
-                        secureuri: false,//是否启用安全提交，默认为false。
-                        fileElementId: 'svgaUploadFile',// 需要上传的文件域的ID，即<input type="file">的ID。
-                        dataType: 'json',//服务器返回的数据类型。可以为xml,script,json,html。如果不填写，jQuery会自动判断。如果json返回的带pre,这里修改为json即可解决。
-                        success: function (json, status) {//提交成功后自动执行的处理函数，参数data就是服务器返回的数据。
-                            console.log(json);
-                            if (json.path) {
-                                $('#luckyGiftSvgaUrl').val(json.path);
-                                if (json.path != '') {
-                                    $("#svgaImgInfo").html('已上传成功');
-                                } else {
-                                    $("#svgaImgInfo").html('未上传成功');
-                                }
-                                console.log(json.path);
-                                hideLoading();
-                            } else {
-                                $("#tipMsg").text(json.msg);
-                                $("#tipModal").modal('show');
-                                hideLoading();
-                            }
+                    uploadGift($this.files['svgaUploadFile']).then(res => {
+                        let path = res.path;
+                        console.log(path);
+                        $('#luckyGiftSvgaUrl').val(path);
+                        if (path != '') {
+                            $("#svgaImgInfo").html('已上传成功');
+                        } else {
+                            $("#svgaImgInfo").html('未上传成功');
                         }
-                    });
-                })
+                        hideLoading();
+                    }).catch(e => {
+                        console.error(e);
+                        hideLoading(); 
+                    });  
+                });
 
                 $('#viewFileUploadBtn').on('click', function () {
                     showLoading();
-                    $.ajaxFileUpload({
-                        url: '/admin/gift/upload',//后台请求地址
-                        type: 'post',//请求方式  当要提交自定义参数时，这个参数要设置成post
-                        secureuri: false,//是否启用安全提交，默认为false。
-                        fileElementId: 'viewUploadFile',// 需要上传的文件域的ID，即<input type="file">的ID。
-                        dataType: 'json',//服务器返回的数据类型。可以为xml,script,json,html。如果不填写，jQuery会自动判断。如果json返回的带pre,这里修改为json即可解决。
-                        success: function (json, status) {//提交成功后自动执行的处理函数，参数data就是服务器返回的数据。
-                            console.log(json);
-                            if (json.path) {
-                                $('#viewUrl').val(json.path);
-                                $('#viewFile').attr("src", json.path);
-                                if (json.path != '') {
-                                    $("#viewFileInfo").html('已上传成功');
-                                } else {
-                                    $("#viewFileInfo").html('未上传成功');
-                                }
-                                console.log(json.path);
-                                hideLoading();
-                            } else {
-                                $("#tipMsg").text(json.msg);
-                                $("#tipModal").modal('show');
-                                hideLoading();
-                            }
+                    uploadGift($this.files['viewUploadFile']).then(res => {
+                        let path = res.path;
+                        console.log(path);
+                        $('#viewUrl').val(path);
+                        $('#viewFile').attr("src", json.path);
+                        if (path != '') {
+                            $("#viewFileInfo").html('已上传成功');
+                        } else {
+                            $("#viewFileInfo").html('未上传成功');
                         }
+                        hideLoading();
+                    }).catch(e => {
+                        console.error(e);
+                        hideLoading(); 
                     });
-                })
+                });
 
                 $("#cancel").click(function () {
                     TableHelper.unCheckAll("#table");
@@ -1117,6 +1086,7 @@ export default {
                 $("#table").on("click", '.opt-edit', function () {
                     console.log("btnEdit");
                     var id = $(this).attr("data-id");
+                    $this.files = {};
                     $.ajax({
                         type: "get",
                         url: "/admin/gift/get.action",